概述
在使用 Axios 发送 HTTP 请求时，有时候我们需要在请求发送前或响应接收后执行一些额外的操作。Axios 提供了拦截器（Interceptors）功能来帮助我们实现这一需求。
拦截器分为两种类型：请求拦截器和响应拦截器。通过设置这些拦截器，我们可以统一处理诸如添加认证信息、记录日志、转换数据格式等任务。
创建和使用拦截器
添加拦截器
请求拦截器
请求拦截器允许我们在请求被发送之前对其进行修改。可以使用 axios.interceptors.request.use 方法添加请求拦截器。该方法接受两个参数：一个用于处理成功的请求，另一个用于处理出错的请求。
-- -------------------- ---- -------
-------------------------------
-------- -- -
-- ----------
------------------------------- - ------- - - -----------
------ -------
--
------- -- -
-- ----------
------ ----------------------
-
--响应拦截器
响应拦截器允许我们在接收到响应之后对其进行修改。可以使用 axios.interceptors.response.use 方法添加响应拦截器。同样地，该方法也接受两个参数：一个用于处理成功的响应，另一个用于处理出错的响应。
-- -------------------- ---- -------
--------------------------------
---------- -- -
-- ----------
------ --------------
--
------- -- -
-- ----------
-- ---------------------- --- ---- -
-------------------- - ---------
-
------ ----------------------
-
--移除拦截器
当我们不再需要某个拦截器时，可以通过其返回值来移除它。每个拦截器在添加时都会返回一个 ID，这个 ID 可以用来移除对应的拦截器。
-- -------------------- ---- ------- ----- -------------------- - --------------------------------------- -- - ------------------------------- - ------- - - ----------- ------ ------- --- -- ------- ------------------------------------------------------- ----- --------------------- - ------------------------------------------ -- - ------ -------------- --- -- ------- ---------------------------------------------------------
实际应用示例
示例 1：添加认证头
假设我们的应用需要在所有请求中都包含一个认证头，我们可以这样做：
function addAuthHeader(config) {
config.headers['Authorization'] = 'Bearer ' + getToken();
return config;
}
axios.interceptors.request.use(addAuthHeader);示例 2：全局错误处理
为了确保所有的错误都被正确捕获并处理，我们可以添加一个响应拦截器：
-- -------------------- ---- -------
-------- ------------------- -
-- --------------- -- --------------------- --- ---- -
-------------------- - ---------
- ---- -
----------------- ---------- ----- ----------- -------
-
------ ----------------------
-
------------------------------------- --------------注意事项
- 拦截器会作用于所有的 Axios 请求。因此，在设计拦截器时，请确保它们不会对非预期的请求产生负面影响。
- 如果你需要为特定的请求单独处理，可以在创建请求时传入自定义的配置对象，而不是依赖全局拦截器。
- 当应用卸载或者某些组件销毁时，记得移除不必要的拦截器以避免内存泄漏。
通过上述内容，我们可以看到，Axios 的拦截器为我们提供了一种非常灵活的方式来处理请求和响应，使得我们的前端代码更加简洁和可维护。