Axios拦截器：揭秘请求与响应的幕后功臣

前端

2023-05-25 17:12:05

Axios 拦截器：前端开发的秘密武器

在前端开发的浩瀚海洋中，Axios 拦截器犹如一艘护航舰，为我们的数据请求保驾护航，让我们轻松掌控数据流，实现各种功能，提升开发效率。

一、请求拦截器：请求发送前的贴身护卫

就好比出门前整理行装，请求拦截器在数据请求发出前，为其进行全方位的检查和准备。

统一请求头： 拦截器可以统一设置每个请求的请求头，省去在每个接口中重复配置的繁琐。例如，携带身份令牌（token）、设置语言偏好，确保请求符合特定规范。
请求体验证： 拦截器可以检查请求体中的参数是否齐全，格式是否正确。如果发现问题，及时报错，防止无效请求被发送，避免服务器报错。
设置请求超时： 拦截器可以为每个请求设定超时时间，当请求超出规定时间仍未响应时，自动中断请求，防止页面因等待过久而卡顿。

二、响应拦截器：响应返回后的守护神

就像收到快递后的验货环节，响应拦截器对服务器返回的数据进行严密的检查和处理。

统一处理响应结果： 拦截器可以对所有响应结果进行统一处理，提取所需数据，处理错误信息。这样，不同接口返回的数据格式可以保持一致，简化代码逻辑。
判断登录失效： 拦截器可以检查响应结果，判断用户是否因登录失效而导致权限问题。若登录失效，拦截器可以自动跳转到登录页面，提醒用户重新登录。
处理接口异常： 对于接口返回的异常情况，拦截器可以进行统一处理，例如显示错误信息、跳转到错误页面。这样，用户不会因突发情况而不知所措，提高用户体验。

三、如何使用 Axios 拦截器？

使用 Axios 拦截器非常简单，只需要几行代码即可。

import axios from 'axios';

// 创建请求拦截器
axios.interceptors.request.use(function (config) {
  // 请求发送前要做的事情
  return config;
}, function (error) {
  // 请求错误时要做的事情
  return Promise.reject(error);
});

// 创建响应拦截器
axios.interceptors.response.use(function (response) {
  // 响应成功时要做的事情
  return response;
}, function (error) {
  // 响应错误时要做的事情
  return Promise.reject(error);
});