VueJS - 无法捕获 Vue/CLI 项目中的 axios 错误答案

【问题标题】：VueJS - Unable to catch the axios error in Vue/CLI projectVueJS - 无法捕获 Vue/CLI 项目中的 axios 错误
【发布时间】：2021-05-02 03:07:25
【问题描述】：

您好，我正在尝试在 API 出现任何错误时显示一条消息，这里 $http 是 axios

代码如下：

案例 1

...
<span class="badge" id="disconnected" v-if="noerror" >{{noerror.name}}</span>
<span class="badge" id="disconnected" v-if="error" >{{error}}</span>
...
isData: false,
error: null,
noerror: null,
...
status(id) {
          this.$http.get(`/status_init/${id}`)
            .then(response => {
              this.noerror = response.data
              this.isData = true
            })
            .catch ((e) => {this.error = 'No data'})

      }

案例 2

    ...template remains same...

    status(id) {
      const self = this
          self.$http.get(`/status_init/${id}`, {
          headers : {
          'Authorization': process.env.Authorization
        })
            .then(response => {
              self.noerror = response.data
              self.isData = true
            })
             .catch ((e) => {self.error = 'No data'})
      }

如果我像案例 1 那样做，那么状态为 200 的路线绝对可以正常工作，但这里其他状态的路线没有显示任何内容。因此，在案例 1 中，它仅显示 .then 部分。在控制台中，如果路由没有给出 200 状态，那么我得到：

GET https://----URL----2 401 (UNAUTHORIZED) in console

如果我像案例 2 那样做，那么状态为 200 的路由和其他状态的路由将显示 'No Data'。因此，在案例 2 中，它仅显示 .catch 部分。在控制台中我得到的每条路线：

GET https://----URL----2 422 unprocessable IN console

案例 1 对我来说工作正常，因为它显示了 200 条 Ok 路线的正确详细信息，但这里唯一的问题是它没有显示 .catch 状态的逻辑，而不是 200 对我来说它会抛出 401 以防出错在路线中而不是显示“无数据”

请帮帮我，我想捕捉并显示错误代码的消息。我目前在邮递员中遇到的错误：

【问题讨论】：

您的 API 如何引发错误？你能展示你的帖子吗？
当然！我会更新它
你确定请求真的抛出了错误吗？您需要确保请求使用 4XX 或 5XX 响应代码。从 chrome 开发者工具中的网络选项卡查看时，请求将显示为红色。
是的，我确定它会抛出错误，因为我在邮递员中检查过，我已经更新了我的问题，请检查
你能把你的代码放到jsfiddle里吗？

标签： vue.js axios

【解决方案1】：

您应该按照以下逻辑捕获错误。您需要使用两个变量。一个是跟踪响应，另一个是保存数据。

...
isData: false,
noerror: null,
...

  status(id) {
    const self = this;
    self.$http.get(`/status_init/${id}`, {
        headers: {
          'Authorization': process.env.Authorization
        }).then(response => {
        self.noerror = response.data;
        self.isData = true;
      }).catch((e) => {
        self.noerror = 'No data';
        self.isData = false;
      })
    }
  }

<span class="badge" v-if="isData">{{noerror.name}}</span>
<span class="badge" v-if="!isData">{{noerror}}</span>

【讨论】：