CODEWITHSUNDEEP
apivue.jsaxios
Quantum
Quantum

Reputation: 288

How to handle the axios errors in the context of Vuejs

I want to display/print 'Disabled' when ever my API returns any error and display 'Enabled' when it is returning successfully with 200 ok status.

Here's what my API is returning:

enter image description here

So, my API is returning error currently, so i want to print/display 'Disabled'.

Here how i did it:

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

But nothing is printed/displayed on my screen, and i am getting error in my console as GET ...URL... 401 (UNAUTHORIZED), How do i display 'Disabled' when my API returns error and 'Enabled' when my API is returning successfully.

Note: I have also tried in .catch as if (error.response.stastus) and if (error.status) but both did not work and i am getting the same error in my console.

Someone please do help me with this.

Upvotes: 0

Views: 4413

Answers (3)

tuhin47
tuhin47

Reputation: 6048

Your code seems ok. Here is the working demo.

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>

Upvotes: 0

tzknc
tzknc

Reputation: 86

Here is a codepen solution that I'd use for your trouble. Using boolean for selecting the status and then string for the message you want to display.

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>

Upvotes: 2

MotemaddeN
MotemaddeN

Reputation: 534

you need to the code to understand what this status is,

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

or from api you send a json for error message and return by error.response.data.message for this json:

{"message": "UNAUTHORIZED"}

Upvotes: 0

Related Questions