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(拦截器)方法介绍
基础教程推荐
猜你喜欢
- 纯CSS3实现鼠标悬停提示气泡效果 2023-12-21
- js中键盘事件实例简析 2023-12-01
- 6.操作边框的属性.html 2023-10-26
- Vue中Axios常用方法有哪些? 2025-01-12
- 解决vant中 tab栏遇到的坑 van-tabs 2024-03-09
- CSS动画翻转:让网页更动感 2023-10-08
- vue3中关于Composition API与Options API有什么区别? 2025-01-11
- JavaScript实现简单购物小表格 2024-03-08
- AJAX实现指定部分页面刷新效果 2023-02-23
- PJBLOG使用技巧 2023-12-20
