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

相关推荐
会豪2 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子2 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶2 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子2 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_2 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark3 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23333 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin3 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_3 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit3 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言