vue之axios根据某个接口创建实例，并设置headers和超时时间，捕捉异常

花弄影15212024-11-19 0:38

javascript 复制代码

import axiosNew from 'axios';//给axios起个别名

//创建常量实例
const instanceNew = axiosNew.create({
  //axios中请求配置有baseURL选项，表示请求URL的公共部分，url = baseUrl + requestUrl
  baseURL: baseURL,
  //设置超时时间为20秒
  timeout: 20000,
  headers: {
    //根据实际情况设置
    'Content-Type': 'application/json;charset=utf-8',
    //实际项目中需要调用接口设置Authorization的值
    'Authorization': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
  }
})

//实际使用
instanceNew.post('/xxx/call', data).then(res => {
    console.log("call-res.data: ", JSON.stringify(res.data))
    if (res.data.code == 200) {
        //成功操作
    } else {
        //失败操作
    }
}).catch(error => {
    //捕捉异常，也可以执行一些操作
    console.log('error: ', error);
});

项目中有的接口需要根据超时时间做一些操作，比如关闭动画或者某个弹窗什么的，如果使用统一的封装好的axios实例，则只能在超时时间到达后才能继续做某个动作或者由于动画一直在进行，无法停止。因此就想到了针对某个接口调用单独创建axios实例并设置一个较短的超时时间（小于统一设置的超时时间），这样就可以在该接口超时时间到达后关闭动画或者弹窗，能够解决一些类似的问题。