1、安装
npm i axios
2、引入
import axios from 'axios';
3、interceptors代码
//headers加参数
axios.interceptors.request.use(config => {
config.headers.common["Authorization"] = token
return config;
});
//响应拦截器即异常处理
axios.interceptors.response.use((response, config) => {
//请求成功
if (response && response.data.code == 10000 || response.data.code == 1) {
return response
} else {
Message.warning({ message: response.data.message });
return Promise.reject(response);
}
//请求失败
}, err => {
if (err && err.response) {
switch (err.response.status) {
case 401:
Message({
type: "error",
message: err.response.data.Message
});
window.location.href = '/login'
break;
default:
Message({
type: "error",
message: err.response.data.Message
});
}
} else {
Message({
type: "error",
message: '服务器出错,请联系管理员!'
});
}
return Promise.resolve(err.response)
});
以上是编程学习网小编为您介绍的“vue-axios interceptors(拦截器)方法介绍”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:vue-axios interceptors(拦截器)方法介绍
基础教程推荐
猜你喜欢
- vue安装axios脚手架报“ ./node_modules/axios/lib/core/mergeConfig.js”错误解决方法 2025-01-15
- vue项目打包部署跨域的实现步骤 2023-07-10
- 详解浏览器渲染页面过程 2024-04-02
- mac打开同一程序所有窗口快捷键介绍 2024-12-14
- vue中的scoped样式不生效解决方法(样式穿透的方法) 2025-01-18
- 浅谈javascript中onbeforeunload与onunload事件 2024-01-04
- CSS控制让每行显示4个图片的样式 2024-03-09
- 任意图片实现垂直居中的三种方法(兼容性还不错) 2024-04-02
- CSS仿网易首页的头部菜单栏按钮和三角形制作方法 2024-01-22
- javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例 2024-02-09