默认配置

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

 

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐