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

相关推荐
Kagol3 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源
The_era_achievs_hero8 分钟前
微信131~140
开发语言·javascript·微信
然我13 分钟前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
良木林1 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
工业甲酰苯胺8 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang8 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止8 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms8 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登8 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in9 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome