Axios 调用错误处理 - JavaScript

Axios 是一个用于发出 HTTP 请求的流行 JavaScript 库，它可以轻松地与其他前端框架（如 React、Vue 等）集成。在处理 HTTP 请求时，可能会遇到各种错误和异常情况，比如超时、网络错误、服务器错误等。这些错误可能会影响用户体验，因此我们需要对它们进行正确的处理。

错误处理

Axios 提供了一种在发生错误时处理 HTTP 响应的机制。我们可以使用 .catch() 方法来捕获错误，并在错误发生时执行相应的代码。在以下示例中，我们使用 Axios 发送一个 GET 请求，并在发生错误时输出错误消息。

axios.get('https://some-api.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error.message);
  });

如果服务器返回了错误状态码（如 404、500 等），则它会在 .catch() 块中捕获错误。使用 error.response.status 属性可以获取状态码，并采取相应的行动。以下示例中，我们将根据状态码显示不同的错误消息。

axios.get('https://some-api.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response.status === 404) {
      console.error('Not found');
    } else if (error.response.status === 500) {
      console.error('Internal server error');
    } else {
      console.error('An error has occurred');
    }
  });

我们还可以使用 .finally() 方法来在请求结束后执行某些操作。例如，我们可以在请求完成后隐藏加载指示器。

axios.get('https://some-api.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error.message);
  })
  .finally(() => {
    hideLoader();
  });

全局错误处理

如果您想在应用程序中全局处理 Axios 请求错误，则可以通过设置 axios.interceptors.response 属性来实现。该属性允许我们拦截所有 Axios 响应，并在需要时进行全局错误处理。以下示例中，我们设置了 axios.interceptors.response 属性来捕获所有错误，并在控制台输出消息。

axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    console.error(error.message);
    return Promise.reject(error);
  }
);

结论

在处理 Axios 请求时，错误处理是非常重要的。使用 .catch()、.finally() 和 axios.interceptors.response 方法，我们可以轻松地捕获错误并采取相应的行动。这将有助于提高用户体验并确保应用程序的稳定性。