详解axios全局路由拦截的设置方法
更新时间：2023年09月28日 09:19:19 作者：kingtopest
这篇文章主要介绍了axios全局路由拦截的设置方法,axios全局路由代码通常是在构建axios实例注入的，本文通过实例代码介绍的非常详细，需要的朋友可以参考下
一个项目中如果http请求发生了错误/异常，比如返回码4xx（表示没有授权，登录过期等），我们希望能够在axios在第一时间就能拦截获取到，然后直接提示报错的错误信息，而不是在发起请求的地方，单独去做判断，这样效率太低。
所以这个时候，axios全局路由拦截就登场了：
axios全局路由代码通常是在构建axios实例注入的，下面就是代码模板：
const instance = axios.create({})
instance.interceptors.response.use(
// 回调函数1： 入参是请求成功时的返回结果：response
(response) => {
// 请求正常时的代码块
return response
},
// 回调函数2： 入参是请求失败时的返回错误: error
(error ) => {
// 请求发生错误时的代码块。
}
);下面是一个应用实例中的代码：
import axios from "axios";
import { message } from "antd"
import { useNavigate } from "react-router-dom";
const baseURL = "xxxxx"
// 创建axios实例
const instance = axios.create({
baseURL,
headers: {
"Authorization": "xxxxxxxxx",
},
});
const navigate = useNavigate();
// 设置axios全局路由拦截
instance.interceptors.response.use(
(response) => {
return response;
},
(error ) => {
if (!error.response) {
message.error("网络异常", 3);
} else if ( error.response.status != 200) {
console.log(error.response);
error.response.data.err? message.error(error.response.data.err,3): null;
navigate("/signin");
}
}
}
);总结：axios全局路由拦截的设置方法分为两步：
1. 通过 axios.create方法创建axios实例
2. 通过axios实例的interceptors.response.use方法创建拦截规则，这个方面里面有两个回调函数
a. 回调函数1： 入参是请求成功时的返回结果：response
b. 回调函数2： 入参是请求失败时的返回错误: error
到此这篇关于axios全局路由拦截的设置方法的文章就介绍到这了,更多相关axios全局路由拦截内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
路由存在两者模式,一种是历史模式history,一种是hash模式,下面这篇文章主要给大家介绍了关于vite vue3下配置history模式路由的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了如何使用vue实现带缩略图的轮播图效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的可以参考下2024-02-02
在 Vue 中,如果需要将按钮居中显示,可以使用 CSS 中的 `text-align: center` 属性来实现,本文通过实例代码给大家介绍Vue 按钮居中、按钮居左、按钮居右的实现代码,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了vue3编写挂载DOM的插件的问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了12 种使用Vue 的最佳做法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要为大家详细介绍了vue双花括号的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
文章介绍如何通过修改Volar插件内部文件,使英文版VS Code显示中文代码提示,需手动调整language-server.js中的语言设置,但因文件经压缩混淆,操作复杂且无官方支持,存在兼容性风险2025-07-07
这篇文章主要介绍了vue项目上传Github预览的实现示例，在完成Vue项目以后，在上传到github并实现预览2018-11-11
本文探讨了在Vue3中实现多实例动态创建与缓存复用的架构方案,针对传统单实例模式的局限性,提出基于"实例工厂+缓存池"的设计模式,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2025-10-10
在使用 Vue.js 开发单页应用 (SPA) 的过程中,开发者经常会遇到两个常见问题,页面切换时出现短暂的空白屏幕,以及刷新页面时返回 404 错误,下面我们就来讲讲这两个问题该如何将解决吧2025-05-05
最新评论