axios全局路由拦截的设置方法

一个项目中如果http请求发生了错误/异常，比如返回码4xx（表示没有授权，登录过期等），我们希望能够在axios在第一时间就能拦截获取到，然后直接提示报错的错误信息，而不是在发起请求的地方，单独去做判断，这样效率太低。

所以这个时候，axios全局路由拦截就登场了：

axios全局路由代码通常是在构建axios实例注入的，下面就是代码模板：

const instance = axios.create({}) 

instance.interceptors.response.use(

// 回调函数1： 入参是请求成功时的返回结果：response

  (response) => {    

     // 请求正常时的代码块

    return response

  },

// 回调函数2： 入参是请求失败时的返回错误: error

  (error ) => {

      // 请求发生错误时的代码块。

  }

);

下面是一个应用实例中的代码：

import axios  from "axios";

import { message } from "antd"

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

const baseURL = "xxxxx"

// 创建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("网络异常", 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方法创建axios实例

2.  通过axios实例的interceptors.response.use方法创建拦截规则，这个方面里面有两个回调函数

      a. 回调函数1： 入参是请求成功时的返回结果：response

      b. 回调函数2： 入参是请求失败时的返回错误: error