axios 默认配置和实例配置

默认配置

在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请求进行二次封装

1. 根据指定配置创建一个新的 axios ,也就是每个axios 都有自己的配置
2. 新的 axios 只是没有 取消请求 和 批量请求 的方法，其它所有语法都是一致的
3. 为什么要这种语法？
   1. 需求，项目中有部分接口需要的配置与另一部分接口的配置不太一样
   2. 解决：创建2个新的 axios ，每个都有自己的配置，分别对应不同要求的接口请求中
4. 一定要注意，这里的需求是同时需要做不一样的接口配置的时候才这样操作，如果是生产环境和开发环境的接口不一样，就需要进行环境的配置，这是不一样的需求。

//创建实例
var instance = axios.create();
instance.defaults.timeout= 2500

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

执行顺序是，默认值，实例默认值，参数设置值，后者会覆盖前者

说到实例经常我们的使用场景是这样的：

//main.js
var instance1 = axios.create({
  baseURL: 'https://some-domain.com/api1',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

var instance2 = axios.create({
  baseURL: 'https://some-domain.com/api2',
  timeout: 2000,
  headers: {'X-Custom-Header': 'foobar'}
});

var instance3 = axios.create({
  baseURL: 'https://some-domain.com/api3',
  timeout: 3000,
  headers: {'X-Custom-Header': 'foobar'}
});


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

 Vue为何要设置Vue.prototype.$http1=instance1 ，请参考这个博客

//使用这个实例
this.$http1({
    method: 'post',
    url: 'consumer/trace/passengerTraceClient/getTripFlight',
    data: {
        openId: "oEy5O1231312321315sk",
        userId: "2597123134300"
    }
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

 

 

本文地址：https://blog.csdn.net/william_munch/article/details/109635851