Axios 错误

Axios 是一款常用的 Promise based HTTP client，用于发送 HTTP 请求。但在使用中，难免会出现一些错误，本文将对常见的 Axios 错误进行分类讲解。

Axios 错误分类

网络错误

在发送请求时，可能会遇到网络错误。例如，网络不可用、DNS 解析失败、请求超时等。这种情况下，Axios 会抛出 Error 对象。

使用示例：

axios.get('/api/data').catch(function (error) {
  if (error.response) {
    // 请求发出去了，但是服务器返回错误
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // 请求发出去了，但没有收到响应
    console.log(error.request);
  } else {
    // 其他错误
    console.log('Error', error.message);
  }
  console.log(error.config);
});

HTTP 错误

在服务器返回的响应中，可能会包含 HTTP 错误（例如 404 Not Found、500 Server Error 等）。这种情况下，Axios 会抛出 HttpError 对象。

使用示例：

axios.get('/api/data')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.headers);
    console.log(response.config);
  })
  .catch(function (error) {
    if (error.response) {
      // 请求发出去了，但是服务器返回错误
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
      console.log(error.response.config);
    }
  });

请求取消

在发送请求时，可以使用 cancelToken 取消请求。这种情况下，Axios 会抛出 Cancel 对象。

使用示例：

// 使用 CancelToken.source 取消请求
const source = axios.CancelToken.source();

axios.get('/api/data', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理其他错误
  }
});

// 取消请求
source.cancel('请求被取消');

配置错误

在使用 Axios 发送请求时，可能会有一些配置错误。例如，url、method、headers 等参数不正确。这种情况下，Axios 会抛出 ConfigError 对象。

使用示例：

axios({
  url: 'not-existed-url',
  method: 'get'
})
  .then(function (response) {
    // 处理响应数据
  })
  .catch(function (error) {
    if (error.isAxiosError) {
      if (error.code === 'ECONNABORTED') {
        // 请求超时
        console.log('请求超时');
      } else {
        console.log(error.toJSON());
      }
    } else if (error instanceof Error) {
      // 其他错误
      console.log(error.message);
    }
  });

总结

本文介绍了 Axios 的常见错误，包括网络错误、HTTP 错误、请求取消、配置错误等。对于这些错误，我们可以通过捕获异常来进行处理，并提供友好的用户界面。