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条确定的路线的正确详细信息，但是这里唯一的问题是，它不显示除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屋！