如何处理错误 axios js

简介

Axios是一个使用Promise的基于XMLHttpRequest的HTTP客户端，具有易用性和可扩展性，广泛应用于前端开发中。在使用Axios时，我们经常需要处理各种错误。

本文将介绍如何在Axios中处理各种错误，包括网络错误、请求超时、服务器错误、取消请求等等。

网络错误处理

网络错误指的是由于网络状况不佳导致请求无法到达服务器或者从服务器返回。Axios提供了一种通过捕获错误对象处理网络错误的方式。代码如下：

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // 一些错误是在设置请求时触发的
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

这个示例演示了Axios提供的.catch()方法。如果发生网络错误，将会返回一个错误对象。

请注意，Axios默认情况下，根据HTTP返回状态码来判断请求是否成功，状态码不在2xx范围内会抛出错误。例如，状态码为404或500的时候。

Axios还支持设置更严格的状态码，例如只接受2xx范围内的状态码，示例代码如下：

axios.get('/user/12345', {
    validateStatus: function (status) {
        return status >= 200 && status < 300; // default
    }
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

请求超时处理

超时错误是在请求响应时间超过指定的超时时间而发生的错误。Axios提供了一种非常方便的处理超时错误的方法。示例代码如下：

axios.get('/user/12345', {
    timeout: 1000
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

这个示例演示了如何设置请求的超时时间，如果网络请求超过1000ms仍未响应则会抛出错误。

服务器错误处理

服务器错误可能是由于应用程序中的Bug或者其他异常而发生，这种错误可能需要开发人员进行进一步的调试和修复。在Axios中处理服务器错误可以通过以下方式：

axios.get('/user/12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    if (error.response.status === 500) {
      console.log('服务器内部错误');
    } else {
      console.log(error);
    }
  });

这个示例演示了如何检测服务器错误并进行处理。

取消请求处理

取消请求是指在发送请求前或正在响应期间停止请求。在Axios中，可以使用CancelToken对象取消请求。使用CancelToken有两种方式：

取消请求前

取消请求前的示例代码如下：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('请求已被取消：', thrown.message);
  } else {
    // 处理其他请求错误
  }
});

// 取消请求（原因：不再需要该请求）
source.cancel('请求已被取消');

首先，我们创建了一个CancelToken对象，并使用source.token将其传递给请求。然后，在需要取消请求的时候，调用source.cancel()，其中的参数是取消请求的原因。

如果请求被取消，catch()块将捕获一个名为thrown的错误对象。我们检查错误对象是否为取消对象（axios.isCancel），如果是则展示一个消息，否则处理其他请求错误。

取消正在响应的请求

取消正在响应的请求的示例代码如下：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
     cancel = c;
  })
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('请求被取消：', thrown.message);
  } else {
    // 处理其他请求错误
  }
});

// 取消请求（原因：不再需要该请求）
cancel('请求已被取消');

这个示例是使用一个executor函数取消请求的，这个函数接收一个参数c，它被调用时传递一个Cancel函数，当请求需要取消时可以通过调用这个函数取消。

使用Axios Interceptors处理错误

上述错误处理都是在Axios请求的.then()块和.catch()块中进行。Axios还提供了一种更为简便的错误处理方式——Interceptors。拦截器是指在请求和响应链上的钩子函数，它们可以修改请求或响应，或者在请求或响应错误时触发事件。可以使用这些拦截器处理各种类型的请求或响应错误。

// 请求拦截器
axios.interceptors.request.use(function (config) {
  // 在请求之前修改配置
  return config;
}, function (error) {
  // 对请求错误进行处理
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据进行处理
  return response;
}, function (error) {
  // 对响应错误进行处理
  return Promise.reject(error);
});

在上述代码中，我们定义了请求和响应拦截器。可以在请求拦截器中修改请求之前的配置或对请求错误进行处理，可以在响应拦截器中对响应数据进行处理或对响应错误进行处理。

这种方式非常灵活，允许我们通过拦截器自定义错误处理逻辑。

结论

Axios提供了许多处理错误的功能，包括网络错误、请求超时、服务器错误、取消请求等。使用Axios，开发人员可以轻松处理各种常见的HTTP错误。