携手 axios 拦截器：为 HTTP 通信量身打造的贴身卫士

前端

2024-01-19 22:28:01

axios 拦截器：守护 HTTP 通信的贴身卫士

axios 拦截器本质上是两个函数：请求拦截器和响应拦截器。请求拦截器会在请求发送之前执行，响应拦截器则会在响应返回之后执行。通过这两个拦截器，开发者可以对 HTTP 请求和响应进行各种各样的操作，从而实现各种各样的需求。

请求拦截器：护航请求，畅通无阻

请求拦截器可以在请求发送之前执行，为请求添加或修改各种信息，或直接取消请求。常见的应用场景包括：

添加请求头：请求头是 HTTP 请求中携带的重要信息，用来请求的各种属性。通过请求拦截器，开发者可以向请求添加自定义的请求头，以便服务器能够更好地处理请求。
添加查询参数：查询参数是附加在请求 URL 后面的参数，用来向服务器传递数据。通过请求拦截器，开发者可以向请求添加自定义的查询参数，以便服务器能够更好地处理请求。
预处理请求数据：在某些情况下，需要在发送请求之前对请求数据进行预处理，例如对数据进行加密、压缩或格式化等操作。通过请求拦截器，开发者可以对请求数据进行预处理，以便服务器能够更好地处理请求。
取消请求：在某些情况下，需要在请求发送之前取消请求，例如用户取消了操作或网络连接中断等情况。通过请求拦截器，开发者可以取消请求，以便服务器能够更好地处理请求。

响应拦截器：拦截响应，掌控全局

响应拦截器可以在响应返回之后执行，为响应数据添加或修改各种信息，或直接处理错误。常见的应用场景包括：

预处理响应数据：在某些情况下，需要在使用响应数据之前对其进行预处理，例如对数据进行解密、解压或格式化等操作。通过响应拦截器，开发者可以对响应数据进行预处理，以便能够更好地使用数据。
处理错误：在某些情况下，服务器返回的响应可能会包含错误信息，这时需要对错误进行处理，例如向用户显示错误消息或重试请求等操作。通过响应拦截器，开发者可以对错误进行处理，以便能够更好地处理错误。
添加响应头：响应头是 HTTP 响应中携带的重要信息，用来响应的各种属性。通过响应拦截器，开发者可以向响应添加自定义的响应头，以便客户端能够更好地处理响应。
记录日志：在某些情况下，需要记录 HTTP 请求和响应的日志，以便能够对 HTTP 通信进行分析和排查问题。通过响应拦截器，开发者可以记录 HTTP 请求和响应的日志，以便能够更好地进行分析和排查问题。

axios 拦截器的实现

axios 拦截器的实现很简单，只需调用 axios.interceptors.request.use() 和 axios.interceptors.response.use() 方法即可。这两个方法的第一个参数是一个函数，该函数将在请求发送之前或响应返回之后执行。第二个参数是一个可选的配置对象，可以用来配置拦截器的行为。

axios.interceptors.request.use((config) => {
  // 在请求发送之前执行
  return config;
}, (error) => {
  // 在请求发送之前处理错误
  return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
  // 在响应返回之后执行
  return response;
}, (error) => {
  // 在响应返回之后处理错误
  return Promise.reject(error);
});