axios全局路由拦截的设置方法

最新推荐文章于 2025-05-19 08:00:00 发布

原创最新推荐文章于 2025-05-19 08:00:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#axios

本文介绍了如何在项目中使用axios的全局路由拦截功能，以便在请求出错时立即捕获并处理，提高效率。详细步骤包括创建axios实例并配置interceptors.response.use方法的两个回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个项目中如果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");

}

}

}

);