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

相关推荐
尝尝你的优乐美几秒前
原来前端二进制数组有这么多门道
前端·javascript·面试
前端_yu小白3 分钟前
Vue2实现docx,xlsx,pptx预览
开发语言·javascript·ecmascript
金金金__18 分钟前
事件循环-原理篇
javascript·浏览器
CF14年老兵19 分钟前
🔥 2025 年开发者必试的 10 款 AI 工具 🚀
前端·后端·trae
张元清30 分钟前
解密苹果最新 Liquid Glass 效果:如何用代码重现 iOS 设计系统的视觉魔法
前端·css·面试
CF14年老兵35 分钟前
2025 年 React 在 Web 开发中的核心地位:优势、应用场景与顶级案例
javascript·react.js·redux
还是大剑师兰特42 分钟前
Javascript面试题及详细答案150道之(046-060)
javascript·大剑师·js面试题
天下无贼42 分钟前
【轮播图】H5端轮播图、横向滑动、划屏效果实现方案——Vue3+CSS position
css·vue.js
Struggler2811 小时前
让ai更加精准的理解你的提示词
前端
橙某人1 小时前
📆基于Grid布局完成最精简的日期组件
前端·javascript