深入剖析 Axios 拦截器：解锁自定义请求处理与响应控制

踏上 Axios 拦截器的探索之旅

在 Axios 的世界中，拦截器扮演着举足轻重的角色，它们为你提供了一个绝佳的机会来截获、检查和修改请求或响应。借助拦截器，你可以实现以下操作：

• 统一处理 HTTP 请求头
• 修改请求参数
• 捕捉和处理 API 错误
• 记录和分析 HTTP 请求和响应
• 添加自定义身份验证机制
• 在请求或响应完成后执行特定操作

构建拦截器：开启自定义请求与响应之旅

创建拦截器非常简单，只需使用 axios.interceptors.request.use() 或 axios.interceptors.response.use() 方法即可。每个方法接受两个参数：

• 成功处理函数：在请求或响应成功时执行的函数。
• 错误处理函数：在请求或响应失败时执行的函数。

拦截器实例：揭秘拦截器背后的运作机制

拦截器实例是一个对象，包含两个属性：

• onFulfilled：成功处理函数
• onRejected：错误处理函数

你可以使用这些属性来定义拦截器行为。

开启拦截器之旅：应用拦截器实例

为了使拦截器生效，你需要将其添加到 Axios 实例中。你可以通过以下代码实现：

const instance = axios.create();

// 添加请求拦截器
instance.interceptors.request.use((config) => {
  // 在发送请求之前做一些事情
  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use((response) => {
  // 在收到响应后做一些事情
  return response;
}, (error) => {
  // 处理响应错误
  return Promise.reject(error);
});

拦截器用例：在实践中探索拦截器的力量

让我们通过一些实际用例来展示拦截器的强大功能：

• 统一添加 HTTP 请求头：

instance.interceptors.request.use((config) => {
  config.headers['Content-Type'] = 'application/json';
  return config;
});

• 修改请求参数：

instance.interceptors.request.use((config) => {
  config.params = { ...config.params, token: '123456' };
  return config;
});

• 捕捉并处理 API 错误：

instance.interceptors.response.use(
  (response) => {
    if (response.status >= 400) {
      throw new Error('API error');
    }
    return response;
  },
  (error) => {
    // 处理 API 错误
    return Promise.reject(error);
  }
);

• 记录和分析 HTTP 请求和响应：

instance.interceptors.request.use((config) => {
  console.log(`Sending request to ${config.url}`);
  return config;
});

instance.interceptors.response.use(
  (response) => {
    console.log(`Received response from ${response.config.url}`);
    return response;
  },
  (error) => {
    console.log(`Error occurred while sending request to ${error.config.url}`);
    return Promise.reject(error);
  }
);

• 添加自定义身份验证机制：

instance.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
});

• 在请求或响应完成后执行特定操作：

instance.interceptors.request.use((config) => {
  // 显示加载动画
  return config;
});

instance.interceptors.response.use(
  (response) => {
    // 隐藏加载动画
    return response;
  },
  (error) => {
    // 隐藏加载动画
    return Promise.reject(error);
  }
);

总结：掌握拦截器，掌控 Axios

Axios 拦截器为开发者提供了强大的自定义请求处理和响应控制能力。通过拦截器，你可以轻松地修改请求参数、处理错误、记录请求和响应，以及执行其他自定义操作。在前端开发中，拦截器是一个必不可少的工具，能够帮助你轻松构建出健壮且灵活的 HTTP 请求处理逻辑。