使用 Axios 获取错误响应

Axios 是一个流行的基于 Promise 的 HTTP 客户端，用于进行网络请求。当使用 Axios 发送请求时，我们可以处理成功响应（状态码为 2xx）和错误响应（状态码为 4xx 或 5xx）。本文将重点介绍如何使用 Axios 获取错误响应。

安装和导入 Axios

使用 Axios 需要先安装它。可以使用 npm 或 yarn 进行安装：

npm install axios

然后，在代码中导入 Axios：

const axios = require('axios');

发送请求并处理错误响应

使用 Axios 发送请求时，可以通过 .catch 或 .then 附加处理错误响应。下面是一个使用 Axios 发送 GET 请求的例子：

// 发送 GET 请求
axios.get('https://api.example.com/data')
  .then(function (response) {
    console.log('成功响应:', response.data);
  })
  .catch(function (error) {
    console.error('错误响应:', error.response.data);
  });

在以上代码中，我们使用 axios.get 方法发送 GET 请求，并通过 .then 处理成功响应，.catch 处理错误响应。错误响应通过 error.response 对象来访问，其中包含状态码、错误信息等。

如果需要在响应包含错误时执行相同的代码，可以使用 .finally：

axios.get('https://api.example.com/data')
  .then(function (response) {
    console.log('成功响应:', response.data);
  })
  .catch(function (error) {
    console.error('错误响应:', error.response.data);
  })
  .finally(function () {
    console.log('请求完成');
  });

在以上代码中，.finally 始终会在请求完成后执行，无论是成功响应还是错误响应。

错误处理的其他方式

除了使用 .catch 处理错误响应之外，还可以使用 try-catch 来处理错误。下面是一个使用 try-catch 的示例：

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('成功响应:', response.data);
  } catch (error) {
    console.error('错误响应:', error.response.data);
  } finally {
    console.log('请求完成');
  }
}

fetchData();

在以上代码中，我们使用 async/await 和 try-catch 来处理错误响应。

针对特定错误状态码处理

如果需要针对特定的错误状态码执行不同的操作，可以在 .catch 中通过判断错误状态码来处理。以下是一个示例：

axios.get('https://api.example.com/data')
  .then(function (response) {
    console.log('成功响应:', response.data);
  })
  .catch(function (error) {
    if (error.response.status === 404) {
      console.error('未找到数据');
    } else if (error.response.status === 500) {
      console.error('服务器错误');
    } else {
      console.error('其他错误');
    }
  });

在以上代码中，我们根据错误状态码执行不同的操作。

总结

Axios 提供了便利的方法来处理错误响应。我们可以使用 .catch 或 try-catch 来处理错误响应，并根据需要执行相应的操作。通过理解和灵活使用 Axios，我们能够更好地处理错误响应并完善我们的程序。