默認配置

在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);
})

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/223391.html

標籤：其他

上一篇：邊緣設備、系統及計算雜談(1)

下一篇：Android 實作HTTPS自簽名證書(非常詳細)

axios 默認配置和實體配置

默認配置

實體配置