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

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实例并设置一个较短的超时时间(小于统一设置的超时时间),这样就可以在该接口超时时间到达后关闭动画或者弹窗,能够解决一些类似的问题。

相关推荐
伍华聪8 分钟前
基于Vant4+Vue3+TypeScript的H5移动前端
前端
Nayana10 分钟前
axios-取消重复请求--CancelToken&AbortController
前端·axios
大舔牛17 分钟前
网站性能优化:小白友好版详解
前端·面试
转转技术团队26 分钟前
你的H5页面在折叠屏上适配了吗?
前端
北辰浮光37 分钟前
[Web数据控制]浏览器中cookie、localStorage和sessionStorage
前端·vue.js·typescript
Dolphin_海豚40 分钟前
charles proxying iphone
前端·ios
用户8417948145640 分钟前
vue 如何使用 vxe-table 来实现跨表拖拽,多表联动互相拖拽数据
前端·vue.js