Axios 拦截器-FunTeaLearn Online Web Tutorials

概述

在使用 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 的拦截器为我们提供了一种非常灵活的方式来处理请求和响应，使得我们的前端代码更加简洁和可维护。

Axios 拦截器

概述