詳解axios全局路由攔截的設(shè)置方法
一個(gè)項(xiàng)目中如果http請(qǐng)求發(fā)生了錯(cuò)誤/異常，比如返回碼4xx（表示沒有授權(quán)，登錄過期等），我們希望能夠在axios在第一時(shí)間就能攔截獲取到，然后直接提示報(bào)錯(cuò)的錯(cuò)誤信息，而不是在發(fā)起請(qǐng)求的地方，單獨(dú)去做判斷，這樣效率太低。
所以這個(gè)時(shí)候，axios全局路由攔截就登場(chǎng)了：
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
到此這篇關(guān)于axios全局路由攔截的設(shè)置方法的文章就介紹到這了,更多相關(guān)axios全局路由攔截內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
路由存在兩者模式,一種是歷史模式history,一種是hash模式,下面這篇文章主要給大家介紹了關(guān)于vite?vue3下配置history模式路由的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)帶縮略圖的輪播圖效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的可以參考下2024-02-02
Vue 按鈕居中、按鈕居左、按鈕居右的實(shí)現(xiàn)代碼
在 Vue 中,如果需要將按鈕居中顯示,可以使用 CSS 中的 `text-align: center` 屬性來實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹Vue 按鈕居中、按鈕居左、按鈕居右的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue3編寫掛載DOM的插件的問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了12 種使用Vue 的最佳做法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要為大家詳細(xì)介紹了vue雙花括號(hào)的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Vue Official 手動(dòng)更改插件顯示語言的解決方案
文章介紹如何通過修改Volar插件內(nèi)部文件,使英文版VS Code顯示中文代碼提示,需手動(dòng)調(diào)整language-server.js中的語言設(shè)置,但因文件經(jīng)壓縮混淆,操作復(fù)雜且無官方支持,存在兼容性風(fēng)險(xiǎn)2025-07-07
vue項(xiàng)目上傳Github預(yù)覽的實(shí)現(xiàn)示例
這篇文章主要介紹了vue項(xiàng)目上傳Github預(yù)覽的實(shí)現(xiàn)示例，在完成Vue項(xiàng)目以后，在上傳到github并實(shí)現(xiàn)預(yù)覽2018-11-11
Vue 3 多實(shí)例 + 緩存復(fù)用理念及實(shí)踐架構(gòu)
本文探討了在Vue3中實(shí)現(xiàn)多實(shí)例動(dòng)態(tài)創(chuàng)建與緩存復(fù)用的架構(gòu)方案,針對(duì)傳統(tǒng)單實(shí)例模式的局限性,提出基于"實(shí)例工廠+緩存池"的設(shè)計(jì)模式,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-10-10
在使用?Vue.js?開發(fā)單頁應(yīng)用?(SPA)?的過程中,開發(fā)者經(jīng)常會(huì)遇到兩個(gè)常見問題,頁面切換時(shí)出現(xiàn)短暫的空白屏幕,以及刷新頁面時(shí)返回?404?錯(cuò)誤,下面我們就來講講這兩個(gè)問題該如何將解決吧2025-05-05