告别冗余：消除 Axios 拦截中的繁琐 if 判断，轻松打造简洁代码

2023-12-12 03:37:53

背景介绍

Axios 是一个基于 Promise 的 HTTP 库，它可以轻松地发送异步 HTTP 请求。在 Axios 中，拦截器是一个非常强大的功能，它允许我们在请求或响应被发送到服务器之前或之后对它们进行处理。

常见问题

在使用 Axios 拦截器时，一个常见的问题是需要对错误状态码进行 if 判断。例如，我们可能需要对 401（未授权）或 404（未找到）等错误状态码进行特殊的处理。

axios.interceptors.response.use((response) => {
  if (response.status === 401) {
    // 处理未授权错误
  } else if (response.status === 404) {
    // 处理未找到错误
  } else {
    // 处理其他错误
  }
}, (error) => {
  // 处理其他错误
});

这种方式虽然能够满足我们的需求，但它存在几个问题：

代码冗长繁琐。如果需要处理多种错误状态码，我们需要编写大量的 if 判断语句，这会使代码难以阅读和维护。
可扩展性差。如果需要添加新的错误处理逻辑，我们需要在 if 判断语句中添加新的代码，这会使代码更加复杂和难以维护。

解决方案

为了解决这些问题，我们可以使用更简洁优雅的方式来处理错误响应。我们可以使用 Axios 提供的 response.status 属性来获取错误状态码，然后使用 switch 语句来处理不同的错误状态码。

axios.interceptors.response.use((response) => {
  switch (response.status) {
    case 401:
      // 处理未授权错误
      break;
    case 404:
      // 处理未找到错误
      break;
    default:
      // 处理其他错误
      break;
  }
}, (error) => {
  // 处理其他错误
});