什么是Axios？

Axios是用于浏览器和node.js的基于Promise的HTTP客户端。它具有许多有用的默认值，例如自动检测JSON响应并返回一个对象而不是纯文本，如果响应状态代码大于400，则会引发错误。

什么是axios拦截器？

Axios 拦截器 是库每次发送或接收请求时都会调用的函数。您可以先拦截请求或响应，然后再通过“然后”或“捕获”处理它们。

例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做点什么
    return config;
  }, function (error) {
    // 在请求失败时做一些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 任何位于2xx范围内的状态码都会触发此功能
    // 对响应数据进行处理
    return response;
  }, function (error) {
    // 任何超出2xx范围的状态码都会触发此功能
    // 对响应错误进行处理
    return Promise.reject(error);
  }
);

删除拦截器。

1
2
const interceptor = axios.interceptors.request.use(function (config) {/*...*/});
axios.interceptors.request.eject(interceptor);

使用拦截器在每个请求中注入身份验证令牌头。

在构建应用程序时，您很有可能会使用需要某些凭据（例如api_token或用户Auth令牌）的API。通常，您将必须在每个HTTP请求后附加所需的标头。使用Axios拦截器，您可以设置一次，在任何调用Axios实例的地方，都可以确保令牌存在。

1
2
3
4
5
6
7
8
axios.interceptors.request.use(req => {
  // 'req' 是Axios请求配置，因此您可以修改 'headers'
  req.headers.authorization = 'Bearer mytoken';
  return req;
});

// 由于请求拦截器而自动设置授权标头
const res = await axios.get('https://api.example.com');

使用拦截器记录每个请求和响应。

记录请求可能是有益的，特别是当您拥有大型应用程序并且不知道所有请求在何处触发时。使用Axios拦截器，您可以快速记录每个请求和响应。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const axios = require('axios');

axios.interceptors.request.use(req => {
  console.log(`${JSON.stringify(req, null, 2)}`);
  // 完成后必须返回请求对象
  return req;
});

axios.interceptors.response.use(res => {
  console.log(res.data.json);
  // 完成后必须返回请求对象
  return res;
});

await axios.post('https://example.com');

使用Axios拦截器进行错误处理。

您可以使用Axios拦截器来捕获所有错误，并在到达最终用户之前对其进行增强。如果您使用具有不同错误对象形状的多个API，则可以使用拦截器将它们转换为标准结构。

1
2
3
4
5
6
7
8
9
10
11
const axios = require('axios');
axios.interceptors.response.use(
  res => res,
  err => {
    throw new Error(err.response.data.message);
  }
)
const err = await axios.get('http://example.com/notfound').
  catch(err => err);
// 处理错误
err.message;

使用拦截器为请求添加速率限制。

后端资源有限，可能耗费大量性能。作为客户端，您可以通过限制HTTP调用的速率来帮助减轻服务器的负载。使用Axios拦截器的方法如下。

1
2
3
4
5
6
7
8
9
10
11
12
const axios = require(‘axios’);
const debounce = require('lodash.debounce');
axios.interceptors.request.use(
  res => {
return new Promise((resolve) => {
// 每2秒仅触发一次请求
       debounce(
          () => resolve(config),2000);
       });
    });
  }
)