VueJS - 无法捕获 Vue/CLI 项目中的 axios 错误 [英] VueJS - Unable to catch the axios error in Vue/CLI project

问题描述

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

Hello i am trying to display a message whenever the API has any error, here $http is 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 状态，那么我得到:

If i do it like case 1 then the routes with 200 status is working absolutely fine but here the routes with some other status is not displaying anything. Thus in case 1 it shows .then part only. And in console if routes does not give 200 status then i get:

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

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

If i do it like case 2 then the routes with 200 status and the routes with some other status are displaying 'No Data'. Thus in case 2 it shows .catch part only. And in console for every routes I get:

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

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

Case 1 is working fine for me as it is showing proper details for 200 Ok routes, but here only problem is that it does not show the .catch logic for status other than 200 and for me it throws 401 in case of error in routes rather than displaying 'No Data'

请帮帮我，我想捕捉并显示错误代码是什么的消息.我目前在邮递员中遇到的错误:

Please do help me, i want to catch and display message which ever the error code is. The error that i am getting currently in the postman:

推荐答案

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

You should catch the error as below logic. You need to use two variables. One is to keep track of the response and another is for keeping the data.

...
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>

这篇关于VueJS - 无法捕获 Vue/CLI 项目中的 axios 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！