从零掌握 Axios 拦截器：解锁网络请求的无限可能

前端

2023-09-25 20:47:36

在现代 Web 开发中，Axios 库已成为处理 HTTP 请求的强大工具。它的拦截器功能进一步增强了其能力，允许开发人员在请求生命周期中插入自定义逻辑。本文将深入探讨 Axios 拦截器的基本用法，揭示它们在优化网络请求方面的强大功能。

拦截器的本质

拦截器本质上是用于拦截 HTTP 请求或响应的中间件。它们提供了一种机制，可以在请求发送或响应到达应用程序之前或之后执行特定操作。这在处理跨请求的通用任务时非常有用，例如添加授权令牌、处理错误或记录请求。

Axios 拦截器的类型

Axios 提供了两种类型的拦截器：请求拦截器和响应拦截器。请求拦截器在请求发送之前执行，而响应拦截器在响应到达应用程序之后执行。

请求拦截器的用法

请求拦截器用于修改即将发送的请求。一些常见的用例包括：

添加通用请求头（例如，授权令牌）
转换请求正文
添加查询参数
处理请求 URL

以下是设置请求拦截器的示例代码：

axios.interceptors.request.use(
  (request) => {
    // 对请求进行修改
    request.headers.Authorization = 'Bearer ' + token;
    return request;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

响应拦截器的用法

响应拦截器用于处理已接收的响应。一些常见的用例包括：

处理错误响应
提取响应数据
记录响应时间
修改响应正文

以下是设置响应拦截器的示例代码：

axios.interceptors.response.use(
  (response) => {
    // 对响应进行处理
    const data = response.data;
    return data;
  },
  (error) => {
    // 处理响应错误
    return Promise.reject(error);
  }
);