返回

Axios拦截器执行顺序大揭秘：一文看懂拦截器工作原理

前端

Axios拦截器：XMLHttpRequest的终极控制台

前言

Axios是一个广受欢迎的JavaScript库，用于在网络应用程序中进行HTTP请求。它提供了强大的拦截器机制，允许开发者在请求和响应被发送之前或之后对其进行修改。本博客将深入探讨Axios拦截器的执行顺序，并通过示例展示其用法。

什么是Axios拦截器？

Axios拦截器是钩子函数，允许你在以下三个阶段截取HTTP请求和响应的生命周期：

  • 请求拦截器： 在请求发送之前被调用。
  • 响应拦截器： 在响应接收后被调用。
  • 错误拦截器： 在请求或响应过程中发生错误时被调用。

拦截器执行顺序

请求拦截器

  1. 按注册顺序调用拦截器。
  2. 如果拦截器返回Promise，等待Promise解决。
  3. 如果拦截器返回一个值，使用该值作为请求体。
  4. 继续执行下一个拦截器。
  5. 发送请求。

响应拦截器

  1. 按注册顺序调用拦截器。
  2. 如果拦截器返回Promise，等待Promise解决。
  3. 如果拦截器返回一个值，使用该值作为响应体。
  4. 继续执行下一个拦截器。
  5. 将响应返回给调用者。

Axios拦截器示例

添加身份验证：

axios.interceptors.request.use((config) => {
  // 添加身份验证信息
  config.headers['Authorization'] = `Bearer ${accessToken}`;

  return config;
});

记录请求和响应：

axios.interceptors.request.use((config) => {
  console.log('请求已发送：', config);

  return config;
});

axios.interceptors.response.use((response) => {
  console.log('响应已接收：', response);

  return response;
});

错误处理：

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    // 处理错误
    console.error('错误：', error);

    throw error;
  }
);

结论

Axios拦截器是一个功能强大的工具，可用于自定义HTTP请求和响应处理。通过了解其执行顺序，你可以有效地利用拦截器来添加身份验证、日志记录或错误处理等功能。无论你是初学者还是经验丰富的开发者，Axios拦截器都能让你轻松扩展Axios的功能，打造出更强大的网络应用程序。

常见问题解答

  1. 我可以有多个拦截器吗？

    是的，你可以注册任意数量的请求和响应拦截器。它们将按注册顺序被调用。

  2. 拦截器能返回什么？

    拦截器可以返回一个修改后的配置对象（请求拦截器）或响应对象（响应拦截器）。它们也可以返回一个Promise，该Promise在解决之前会暂停拦截器执行。

  3. 如何移除拦截器？

    你可以使用eject方法从Axios实例中移除拦截器。

  4. 错误拦截器如何工作？

    错误拦截器只在请求或响应过程中发生错误时被调用。它们可以返回一个修改后的响应对象或抛出一个错误。

  5. 拦截器可以访问原始请求或响应吗？

    是的，拦截器可以通过config对象（请求拦截器）或response对象（响应拦截器）访问原始请求或响应。