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

所以這個(gè)時(shí)候，axios全局路由攔截就登場了：

axios全局路由代碼通常是在構(gòu)建axios實(shí)例注入的，下面就是代碼模板：

const instance = axios.create({})?

instance.interceptors.response.use(

// 回調(diào)函數(shù)1： 入?yún)⑹钦?qǐng)求成功時(shí)的返回結(jié)果：response

? (response) => {? ??

? ? ?// 請(qǐng)求正常時(shí)的代碼塊

? ? return response

? },

// 回調(diào)函數(shù)2： 入?yún)⑹钦?qǐng)求失敗時(shí)的返回錯(cuò)誤: error

? (error ) => {

? ? ? // 請(qǐng)求發(fā)生錯(cuò)誤時(shí)的代碼塊。

? }

);

下面是一個(gè)應(yīng)用實(shí)例中的代碼：

import axios? from "axios";

import { message } from "antd"

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

const?baseURL = "xxxxx"

// 創(chuàng)建axios實(shí)例

const instance = axios.create({

? baseURL,

? headers: {

? ? "Authorization": "xxxxxxxxx",? ?

? },

});

const navigate = useNavigate();

// 設(shè)置axios全局路由攔截

instance.interceptors.response.use(

? (response) => {? ??

? ? return response;

? },

? (error ) => {

? ? if (!error.response) {

? ? ? message.error("網(wǎng)絡(luò)異常", 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");

? ? ? ?}

? ?

? ? ?}

? }

);

?總結(jié)：axios全局路由攔截的設(shè)置方法分為兩步：

1.? 通過 axios.create方法創(chuàng)建axios實(shí)例

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

? ? ? a.?回調(diào)函數(shù)1： 入?yún)⑹钦?qǐng)求成功時(shí)的返回結(jié)果：response

? ? ? b.?回調(diào)函數(shù)2： 入?yún)⑹钦?qǐng)求失敗時(shí)的返回錯(cuò)誤: error