Axios 收到错误消息 - JavaScript

简介

在使用 Axios 进行网络请求时，我们偶尔可能会遇到错误情况，例如：404 Not Found，500 Internal Server Error 等。这时 Axios 会返回一个错误对象，其中包含了相关的错误信息。本文将介绍如何处理这些错误信息，并为您提供一些实用的技巧和经验。

错误消息对象

Axios 返回的错误对象包含了以下几个属性：

• config：请求配置，包括请求方法，URL，请求头等信息。
• request：请求实例。
• response：响应对象，包含响应头，响应状态等信息。
• message：错误消息。

其中，config，request 和 response 属性分别对应着 Axios 中的 axiosConfig，axiosInstance 和 axiosResponse。这些属性值均可以用来打印或记录日志，以便进行调试和分析。

错误处理

当收到错误消息时，我们通常需要对其进行处理，以显示或者记录错误信息，或者根据错误情况进行特定的操作。下面是一个错误处理的示例：

axios.get("/user/12345")
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(error) {
    console.error("请求出错啦！\n" + error.message);
  });

在上述代码中，我们对一个 GET 请求进行了错误处理，如果请求发生错误，将打印错误消息和具体的错误信息。

错误回调函数

除了使用 catch 来捕获错误之外，我们还可以使用错误回调函数来处理错误。例如：

axios.get("/user/12345", { validateStatus: function(status) { return status >= 200 && status < 300; } })
  .then(function(response) {
    console.log(response.data);
  }, function (error) {
    console.error("请求出错啦！\n" + error.message);
  });

在这种情况下，我们使用了 validateStatus 配置项来判断响应状态，以决定请求是否成功。如果请求失败，则会调用错误回调函数并打印错误消息和错误信息。

错误消息类型

Axios 返回的错误消息可以是以下几种类型：

• Error：通用错误。
• NetworkError：网络错误。
• HttpError：HTTP 错误。
• Cancel：请求被取消。
• Timeout：请求超时。
• ConfigError：请求配置错误。

根据错误类型的不同，我们可以针对性地处理错误，例如：

axios.get("/user/12345")
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(error) {
    if (error instanceof axios.TimeoutError) {
      console.error("请求超时啦！\n" + error.message);
    } else if (error instanceof axios.HttpError) {
      console.error("请求出错啦！\n" + error.message);
    } else {
      console.error("发生未知错误啦！\n" + error.message);
    }
  });

在这个例子中，我们根据错误类型来进行特定的处理。如果是请求超时，则打印超时消息；如果是 HTTP 错误，则打印错误消息；否则打印未知错误消息。如果您需要更加详细的错误类型，请查看 Axios 的源代码或文档。

结论

在使用 Axios 进行网络请求时，我们需要注意错误处理，并根据具体的场景进行不同的处理。通过本文所介绍的方法和技巧，您可以更加熟练和自如地处理错误消息，从而提高程序的可靠性和稳定性。