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

相关推荐
qq_381338503 分钟前
CSS @layer 级联层实战指南:从样式冲突到分层架构
前端·css
广州华水科技6 分钟前
深度测评2026年好用的单北斗GNSS变形监测系统推荐,提升GNSS位移监测精度,引领智能监控新风尚
前端
花归去23 分钟前
vue3中 function getText(){} 、 const getText=()=>{} ;区别在哪里,优缺点
javascript·vue.js·ecmascript
ZC跨境爬虫36 分钟前
跟着 MDN 学 HTML day_33:(Attr 接口与属性节点的深入理解)
前端·javascript·ui·html·音视频·html5
神所夸赞的夏天1 小时前
如何获取多层json数据,存成dictionary,并取最大最小值
java·前端·json
红色的小鳄鱼1 小时前
前端面试js手写
开发语言·前端·javascript
焦糖玛奇朵婷1 小时前
健身房预约小程序开发、设计
java·大数据·服务器·前端·小程序
上海云盾王帅1 小时前
WEB业务如何接入安全防护:从零到一的实战指南
前端·安全
用户059540174461 小时前
AI Agent记忆丢失踩坑实录:这个问题让我排查了3天
前端·css
web行路人1 小时前
前端对Commands(斜杠命令)一些常用
前端·javascript·vue.js·vue