快捷導(dǎo)航

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

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

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

一個(gè)項(xiàng)目中如果http請(qǐng)求發(fā)生了錯(cuò)誤/異常，比如返回碼4xx（表示沒(méi)有授權(quán)，登錄過(guò)期等），我們希望能夠在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. 通過(guò) axios.create方法創(chuàng)建axios實(shí)例

2. 通過(guò)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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: