axais初步接触（二）

最新推荐文章于 2024-03-28 15:57:01 发布

E_li_na

最新推荐文章于 2024-03-28 15:57:01 发布

阅读量2.6k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/E_li_na/article/details/80279237

版权

本文介绍了axios的默认配置修改，包括全局与实例默认值，详细解析了配置优先级顺序。此外，还深入讨论了Interceptors拦截器的使用，如何添加、移除以及自定义错误处理。同时，文章涵盖了解决请求取消的方法和使用application/x-www-form-urlencoded格式发送数据的策略。

摘要由CSDN通过智能技术生成

默认配置

axios的默认配置是可以修改的，修改后用于所有的请求。

全局axios默认值

axios.defaults.baseRUL='http://baidu.com';
axios.defaults.headers.common['Authorization']=AUTH_TOKEN;
axios.defaults.post['Content-Type']='appliccaion/x-www-form-urlencoded';

自定义实例默认值

//创建实例设置配置默认值
const instance= axios.create({
 baseURL:'https://api.com'
})

//实例创建后修改默认值
instance.defaults.headers.common['Authorization']=AUTH_TOKEN;

配置优先级顺序

配置将与优先级合并。顺序是lib/defaults.js里的库默认值，然后是实例的默认值，最后是请求的config的参数值。后者的优先级高于前者。

//创建一个实例，使用库提供的配置默认值
//此时，config配置值是0，因为库的默认值就是0
const instance=axios.create();

//覆盖库的timeout默认值
//现在所有使用这个实例的请求都将在超时前等待2.5秒
instance.defaults.timeoout=2500;

//覆盖请求的timeout，因为已知它需要更长的时间
instance.get('./longRequest',{
 timeou:5000
})

Interceptors拦截器

你可以拦截请求或者响应在他们被then或者catch处理之前

//添加一个请求拦截器
axios.intercepters.request.use(function(config){
 //do something before request is sent
 return config;
},funcction(error){
 //do something with request error
 return Promise.rejet(error);
})

//添加一个响应拦截器
axios.interceptors.response.use(function(response){
 //do something with the response data
 return response;
},function(error){
 //do something with the response error
 return Promise.reject(error);
})

实例：

service.interceptors.request.use((config) => {
 store.commit(STORE_TYPE.IS_LOADING,true);
 if(config.method === 'post'){
  config.data = qs.stringfy(config.data); 
 }
 return config;
},(error) => {
 console.log('错误的传参','fail');
 return Promise.reject(error);
})

//响应拦截器
service.interceptors.response.use((res) => {
 store.commit(STORE_TYPE_IS_LADING,false);
 if(res.data.code==0){
  Message({
   message:res.data.msg,
   type:'error',
   duration: 5*1000
  })
  return Promise.reject(res)
 }
 return res;
},(error) => {
 store.commit(STORE_TYPE_IS_LOADING,false);
 consol