axios全局路由拦截的设置方法-蒲公英云

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

冷不防 2023-10-16 12:04 102阅读 0赞

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

}

}

}

);