一個項目中如果http請求發(fā)生了錯誤/異常，比如返回碼4xx（表示沒有授權，登錄過期等），我們希望能夠在axios在第一時間就能攔截獲取到，然后直接提示報錯的錯誤信息，而不是在發(fā)起請求的地方，單獨去做判斷，這樣效率太低。

所以這個時候，axios全局路由攔截就登場了：

axios全局路由代碼通常是在構建axios實例注入的，下面就是代碼模板：

const instance = axios.create({})?

instance.interceptors.response.use(

// 回調(diào)函數(shù)1： 入?yún)⑹钦埱蟪晒r的返回結果：response

? (response) => {? ??

? ? ?// 請求正常時的代碼塊

? ? return response

? },

// 回調(diào)函數(shù)2： 入?yún)⑹钦埱笫r的返回錯誤: error

? (error ) => {

? ? ? // 請求發(fā)生錯誤時的代碼塊。

? }

);

下面是一個應用實例中的代碼：

import axios? from "axios";

import { message } from "antd"

import { useNavigate } from "react-router-dom";

const?baseURL = "xxxxx"

// 創(chuàng)建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("網(wǎng)絡異常", 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方法創(chuàng)建axios實例

2.? 通過axios實例的interceptors.response.use方法創(chuàng)建攔截規(guī)則，這個方面里面有兩個回調(diào)函數(shù)

? ? ? a.?回調(diào)函數(shù)1： 入?yún)⑹钦埱蟪晒r的返回結果：response

? ? ? b.?回調(diào)函數(shù)2： 入?yún)⑹钦埱笫r的返回錯誤: error