Блог

Главная - Вопросы по программированию - VueJS — не удалось перехватить ошибку axios в проекте Vue / CLI

VueJS — не удалось перехватить ошибку axios в проекте Vue / CLI

#vue.js #axios

#vue.js #axios

Вопрос:

Здравствуйте, я пытаюсь отображать сообщение всякий раз, когда в 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 только часть. И в консоли, если routes не выдает статус 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 в случае ошибки в маршрутах, а не отображает «Нет данных»

Пожалуйста, помогите мне, я хочу перехватить и отобразить сообщение, в котором когда-либо был код ошибки. Ошибка, которую я получаю в настоящее время в postman:

введите описание изображения здесь

Комментарии:

1. Как ваш API выдает ошибку? Можете ли вы показать n свой пост?

2. Конечно! я обновлю его

3. Вы уверены, что запрос действительно выдал ошибку? Необходимо убедиться, что в запросе используются коды ответа 4XX или 5XX. При просмотре на вкладке сеть в инструментах разработчика Chrome запрос будет отображаться красным цветом.

4. Да, я уверен, что это выдает ошибку, потому что я проверил это в postman, я обновил свой вопрос, пожалуйста, проверьте

5. можете ли вы поместить свой код в jsfiddle?

Ответ №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>
Метки: