Vue.js Axios 400 错误的请求调用 then 而不是 catch

在本文中，我们将介绍如何在 Vue.js 中处理 Axios 400 错误的请求，并使用 then 而不是 catch 来处理异常情况。

什么是 Axios?

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它是一个非常流行的工具，用于向服务器发起 HTTP 请求并获取响应。Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面，而 Axios 是与 Vue.js 配合使用的理想选择。

处理 Axios 的 400 错误

当我们使用 Axios 发起 HTTP 请求时，有时候可能会遇到 400 错误。这种错误表示服务器拒绝了请求，可能是由于请求参数不正确或缺少必要的数据。当我们遇到这种错误时，可以使用 .then 方法来处理异常情况。

下面是一个示例，展示了如何在 Vue.js 中使用 Axios 处理 400 错误的请求：

axios.post('/api/example', {
  data: 'example data'
})
.then(response => {
  console.log('请求成功');
})
.catch(error => {
  if (error.response.status === 400) {
    console.log('请求失败：参数不正确');
  } else {
    console.log('请求失败');
  }
});

在这个示例中，我们使用 .then 方法来处理请求成功的情况，而使用 .catch 方法来处理请求失败的情况。如果遇到 400 错误，我们将在控制台输出 “请求失败：参数不正确” 的错误信息。

需要注意的是，在处理异常情况时，我们需要使用 error.response.status 来获取错误的状态码。通过判断状态码是否为 400，我们可以确定请求是否失败。