快捷導(dǎo)航

詳解axios全局路由攔截的設(shè)置方法

更新時間：2023年09月28日 09:19:19 作者：kingtopest

這篇文章主要介紹了axios全局路由攔截的設(shè)置方法,axios全局路由代碼通常是在構(gòu)建axios實例注入的，本文通過實例代碼介紹的非常詳細，需要的朋友可以參考下

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

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

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

const instance = axios.create({}) 
instance.interceptors.response.use(
// 回調(diào)函數(shù)1： 入?yún)⑹钦埱蟪晒r的返回結(jié)果：response
  (response) => {    
     // 請求正常時的代碼塊
    return response
  },
// 回調(diào)函數(shù)2： 入?yún)⑹钦埱笫r的返回錯誤: error
  (error ) => {
      // 請求發(fā)生錯誤時的代碼塊。
  }
);

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

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();
// 設(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實例

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

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

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

到此這篇關(guān)于axios全局路由攔截的設(shè)置方法的文章就介紹到這了,更多相關(guān)axios全局路由攔截內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: