全面剖析 Axios 拦截器，打造高效前端架构

2023-09-26 21:28:29

一、拦截器的介绍

在使用 Axios 进行数据交互时，拦截器的概念常常会脱颖而出。它如同一道守护神，可以灵活地拦截 HTTP 请求和响应，让您在请求发送和响应处理的过程中拥有更多控制权。Axios 提供了两种类型的拦截器：请求拦截器和响应拦截器，您可以针对不同的需求进行配置和使用。

二、请求拦截器的用法

请求拦截器主要用于在请求发送前对请求进行预处理。您可以使用它来添加统一的请求头、设置请求参数、修改请求体，甚至是根据需要取消请求。请求拦截器可以帮助您在请求发送之前对数据进行一些必要的处理，从而简化代码并提高效率。

// 全局配置，会对所有请求拦截，包括之后的新建实例
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 请求错误时做些什么
  return Promise.reject(error);
});

// 局部配置，仅作用于当前实例
const instance = axios.create();
instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 请求错误时做些什么
  return Promise.reject(error);
});

三、响应拦截器的用法

响应拦截器主要用于在服务器响应后对数据进行处理。您可以使用它来修改响应数据、提取特定信息、甚至根据需要拦截响应并做出特定处理。响应拦截器可以帮助您在接收响应数据后进行一些必要的处理，从而简化代码并提高效率。

// 全局配置，会对所有响应拦截，包括之后的新建实例
axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response;
}, error => {
  // 响应错误时做些什么
  return Promise.reject(error);
});

// 局部配置，仅作用于当前实例
const instance = axios.create();
instance.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response;
}, error => {
  // 响应错误时做些什么
  return Promise.reject(error);
});