axios拦截响应报错

在基于Promise的HTTP客户端中，axios是一个广泛使用的库，它提供了一种简洁明了的方式来发送异步HTTP请求到REST端点，在使用axios时，我们经常需要对请求和响应进行拦截，以便于统一处理一些逻辑，例如认证失效、接口报错、请求重定向等，以下将详细讨论如何使用axios的响应拦截器来处理报错。

我们需要设置axios的响应拦截器，响应拦截器允许我们在请求得到响应后，对响应数据进行处理或修改，这非常实用，因为我们可以在这里检查HTTP状态码，并根据需要处理业务逻辑错误。

// 创建axios实例
const service = axios.create({
  // axios 配置项
});
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    const res = response.data;
    // 这里可以根据后端接口返回数据的结构进行判断
    if (res.code !== 200) {
      // 业务逻辑错误处理
      // 可以根据实际情况，做弹出提示，或者其他的错误处理逻辑
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      });
      // 如果是业务错误，我们返回一个Promise.reject，这样可以在后续的.catch中捕获
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      // 业务成功，返回response对象
      return response;
    }
  },
  error => {
    // 对响应错误做点什么
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在2xx的范围
      const res = error.response.data;
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      });
    } else if (error.request) {
      // 请求已经发出了，但是没有收到响应
      Message({
        message: 'Network Error',
        type: 'error',
        duration: 5 * 1000
      });
    } else {
      // 发送请求时出了点问题
      Message({
        message: error.message || 'Request Error',
        type: 'error',
        duration: 5 * 1000
      });
    }
    // 我们返回一个Promise.reject，这样可以在后续的.catch中捕获
    return Promise.reject(error);
  }
);

在上述代码中，我们首先创建了一个axios实例并为其添加了响应拦截器，拦截器由两部分组成：一个是处理正常响应的回调，另一个是处理异常的回调。

当接口返回的业务状态码不是我们预定的成功状态码时，我们会在第一个回调函数中处理这种情况，通常，后端服务会返回一个包含业务错误信息的JSON对象，我们会弹出错误信息，并调用Promise.reject()来拒绝这个Promise，使得后续的.then()不会被执行，而是直接跳转到.catch()中去。

对于异常处理，我们检查error.response是否存在来区分错误类型，如果error.response存在，说明请求已发出且服务器有响应，但状态码不是2xx，这时我们可以根据服务器返回的错误信息进行提示，如果不存在，可能是请求发出前发生了错误，例如网络问题，或者是请求配置不正确。

特别需要注意的是，当token失效时，可能会在一次用户操作中引发多个请求失败，导致多次弹出错误提示，这会影响用户体验，为了解决这个问题，我们可以设置一个全局变量来控制提示只弹出一次。

let hasTokenErrorShown = false;
// 部分异常处理代码
if (error.response && error.response.status === 401 && !hasTokenErrorShown) {
  hasTokenErrorShown = true;
  Message({
    message: 'Token expired, please login again',
    type: 'error',
    duration: 5 * 1000
  });
}

通过上述机制，我们不仅统一了错误处理的方式，而且避免了因为重复错误导致的频繁提示，提升了用户界面的友好性。

为了避免在拦截器中由于编程疏忽导致的问题，比如在响应拦截器中忘记返回response对象，我们需要仔细检查拦截器的逻辑，确保任何情况下，use函数中的两个回调都正确返回了Promise对象。

使用axios的拦截器可以有效地对HTTP请求进行监控和管理，它为我们提供了一个强大的机制来处理API调用过程中可能出现的各种情况，从而增强应用的可维护性和用户体验。