預設設定

在axios設定中存在baseUrl，header等設定，每次做的axios時，不一定所有的設定都要自己寫，這時候要做一個預設值，例如：

axios.defaults.baseURL ="http://localhost:8080"

之後呼叫如下post方法，請求的介面地址就是 http://localhost:8080/user

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

當然axios的設定可以不依賴於預設，如果進行如下引數設定，那麼請求的介面地址就是http://localhost:9999/user

axios.post('http://localhost:9999/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

範例設定

或許你也知道可以通過axios.create(config) 對axios請求進行二次封裝

根據指定設定建立一個新的 axios ,也就是每個axios 都有自己的設定
新的 axios 只是沒有 取消請求 和 批次請求 的方法，其它所有語法都是一致的
為什麼要這種語法？
1. 需求，專案中有部分介面需要的設定與另一部分介面的設定不太一樣
2. 解決：建立2個新的 axios ，每個都有自己的設定，分別對應不同要求的介面請求中
一定要注意，這裡的需求是同時需要做不一樣的介面設定的時候才這樣操作，如果是生產環境和開發環境的介面不一樣，就需要進行環境的設定，這是不一樣的需求。

//建立範例
var instance = axios.create();
instance.defaults.timeout= 2500

instance.get('/url',{
    timeout:2000
})

執行順序是，預設值，範例預設值，引數設定值，後者會覆蓋前者

說到範例經常我們的使用場景是這樣的：

//main.js
var instance1 = axios.create({
  baseURL: 'http://localhost:9999/api1',
  timeout: 1000
});

var instance2 = axios.create({
  baseURL: 'http://localhost:9998/api2',
  timeout: 2000
});

var instance3 = axios.create({
  baseURL: 'http://localhost:9997/api3',
  timeout: 3000
});


Vue.prototype.$http1=instance1 ;
Vue.prototype.$http2=instance2 ;
Vue.prototype.$http3=instance3 ;

Vue為何要設定Vue.prototype.$http1=instance1 ，請參考這個部落格

//使用這個範例
this.$http1({
    method: 'post',
    url: 'user',
    data: {
        userId: "001"
    }
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

axios 預設設定和範例設定

預設設定

範例設定