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-28
- HTML基础详解(下) 2022-09-21
- JS+CSS实现仿支付宝菜单选中效果代码 2023-12-27
- JavaScript对象与JSON格式的转换及JSON.stringify和JSO 2022-08-30
- 一文教你如何实现localStorage的过期机制 2024-03-08
- vue项目的package.json配置详解 2023-10-08
- 手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果 2023-12-20
- css3+伪元素实现鼠标移入时下划线向两边展开的效果 2023-12-12
- 创建Vue3.0需要安装哪些脚手架 2025-01-13
- div的offsetLeft与style.left区别 2022-11-16