一篇文章教你搞懂Axios拦截器

Axios拦截器提供一个机制，可以在请求或响应被发送到服务端之前或之后执行任意代码。这对于处理请求或响应数据、添加全局错误处理等任务非常有用。以下是Axios拦截器的基本使用方法：

1. 添加请求拦截器

axios.interceptors.request.use(

  function (config) {

    // 在请求发送之前做些什么

    return config;

  },

  function (error) {

    // 对请求错误做些什么

    return Promise.reject(error);

  }

);

2. 添加响应拦截器

axios.interceptors.response.use(

  function (response) {

    // 对响应数据做点什么

    return response;

  },

  function (error) {

    // 对响应错误做点什么

    return Promise.reject(error);

  }

);

在上面的代码中，我们可以使用 use() 方法向Axios实例添加请求和响应拦截器。请求拦截器会在每个请求发出之前被调用，而在响应返回给then() 或catch() 之前调用响应拦截器。一般情况下会在拦截器中对请求或响应数据进行一些操作，并将修改后的结果返回。

需要注意的是，在拦截器中的 config 和 response 都包含了几乎整个请求/响应的信息，可以查看官方文档以进一步学习。

以下是一个完整使用Axios拦截器的示例：

// 添加请求拦截器

axios.interceptors.request.use(

  function (config) {

    // 在发送请求之前做些什么

    config.headers.Authorization = localStorage.getItem('token');

    return config;

  },

  function (error) {

    // 对请求错误做些什么

    return Promise.reject(error);

  }

);