如何处理 Vuejs 上下文中的 axios 错误

Question

我想在我的 API 返回任何错误时显示/打印“已禁用”，并在成功返回 200 ok 状态时显示“已启用”。

这是我的 API 返回的内容：

所以，我的 API 当前返回错误，所以我想打印/显示“已禁用”。

我是怎么做到的：

<template>
      <div class="api_data">
        <span class="trick_not_ok" v-if="error" >{{error}}</span>
        <span class="trick_ok" v-if="noerror" >{{noerror}}</span>
      </div>
</template>
    
    <script>
    import axios from 'axios'
    export default {
      name: Api_data,
      data () {
        return {
          error: [],
          noerror: []
        }
      },
      created() {
        axios.get('...URL...')
          .then((response) => { 
               console.log(response.data)
               this.noerror = 'Enabled' 
           })
          .catch((error) => { 
               if (error) {
                   console.log(error)
                   this.error = 'Disabled'
               }  
          })
      }
    }
    </script>

但是我的屏幕上没有打印/显示任何内容，并且我的控制台中出现错误 GET ...URL... 401 (UNAUTHORIZED)，我如何在何时显示“已禁用”当我的 API 成功返回时，我的 API 返回错误和“已启用”。

注意：我也在 .catch 中尝试过 if (error.response.status) 和 if (error.status) 但两者都不起作用，我在控制台中遇到了同样的错误。

请有人帮我解决这个问题。

Answer 1

您的代码似乎没问题。这是工作演示。

new Vue({
  el: "#api_data",
  data() {
    return {
      error: null,
      noerror: null
    }
  },
  mounted() {
    axios.get('https://api.bonsai.io/clusters')
      .then((response) => {
        console.log(response.data)
        this.noerror = 'Enabled'
      })
      .catch((error) => {
        if (error) {
          this.error = 'Disabled'
        }
      })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

<div id="api_data">
  <span class="trick_not_ok" v-if="error">{{error}}</span>
  <span class="trick_ok" v-if="noerror">{{noerror}}</span>
</div>

Answer 2

这里 是一个代码笔解决方案，我会用它来解决你的麻烦。使用布尔值选择状态，然后使用字符串作为要显示的消息。

new Vue({
  el: "#app",
  data () {
        return {
          isError: false,
          noerror: false,
          message:'loading'
        }
      },
      created() {
        axios.get('...URL...')
          .then((response) => { 
               console.log(response.data)
               this.noerror = true 
               this.message = 'enabled' 
           })
          .catch((error) => { 
               if (error) {
                   console.log(error)
                   this.isError = true
                   this.message = 'disabled'
               }  
          })
      },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

<div id="app">
  <div class="api_data">
    <span class="trick_not_ok" v-if="isError">{{message}}</span>
    <span class="trick_ok" v-if="noerror">{{message}}</span>
  </div>

</div>

Answer 3

你需要通过代码来了解这个状态是什么，

switch(status) { case 401: message = 'UNAUTHORIZED'; break ...}

或从 api 发送一个 json 以获取错误消息并通过 error.response.data.message 返回此 json：

{"message": "UNAUTHORIZED"}