vue-axios `catch` function doesn't trigger when expected

Question

I have a Vue app in a single file component which allows the user to lookup a github username and see the fullname, login, and country the user is from.

Here is my component:

<template>
  <div id="app">
    <form @submit.prevent="search">
      <input v-model="username" />
    </form>
    <p v-if="data">
      {{ data.name }} ({{ data.login }})
      is from
      {{ data.location }}!
    </p>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

export default {
  data() {
    return {
      username: '',
      data: []
    }
  },

  methods: {
    search() {
      const api = `https://api.github.com/users/${this.username}`

      Vue.axios.get(api).then((response) => {
        this.data = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

My issue is: I cannot find a way to handle the situation in which the user enters a user that doesn't exist in github. With the catch block of the axios promise, I expect the error to be logged to console, but it isn't. The reason I want to be able to handle this occasion is that I don't want the placeholder text () is from ! when either nothing has been searched, or an invalid search has been made.

I tried to use data.length instead of just data for the v-if check, but it seems like my component doesn't 'react' when this is the case; I can see the data change in Vue dev tools but not in the component. What could be happening here?

Here is a webpackbin demo of the app: http://www.webpackbin.com/VJlfcrGLM

Saurabh · Accepted Answer · 2017-01-14 17:00:27Z

1

You code seems to running fine, it actually goes in catch block when the user does not exist.

Check working webpackbin here.

I have create a new variable errorMsg and assigning this: this.errorMsg = 'user does not exist' in the catch block, and changed you HTML as follows to show this in the view:

in HTML

<p v-if="!errorMsg">
  {{ data.name }} ({{ data.login }})
  is from
  {{ data.location }}!
</p>
<p v-if="errorMsg">
  {{ errorMsg }}
</p>

in Vue Instance

search() {
  const api = `https://api.github.com/users/${this.username}`

  Vue.axios.get(api).then((response) => {
    this.data = response.data
    this.errorMsg = null
  }).catch(error => {
    this.errorMsg = 'User does not exist'
    console.log(error)
  })
}

You can see this actually goes in the catch block and assign errorMsg variable accordingly, You can make appropriate changes as par your requirement.

edited Jan 14, 2017 at 17:00

answered Jan 14, 2017 at 3:17

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alanbuchanan Over a year ago

This answer is quite confusing. • Why is the check changed to data.name from data? • If you search for a user whose name is null, the data object shows up instead of the expected error message. • In the Webpackbin example, there is a similar console error used for both then and catch parts of the promise. What is going on there? • The Webpackbin example doesn't seem to load for me, but it doesn't have an error. • Why set the data to an error message instead of just setting an errorMsg value in data and using that value for the else block?

Nicolas Vasquez · Accepted Answer · 2017-01-14 03:06:41Z

0

To handling error with axios you need put '.response' in your error variable. Like this:

import axios from 'axios

axios.get(...)
    .then((data) => {
        //code
    })
    .catch((error) => {
        console.log(error.response);
        var aux = error.response //You assign the error data to aux
        //In error.response you have the data
        //error give you only the error message
    })

https://github.com/mzabriskie/axios#handling-errors

You can use axios without VueAxios in the same way.

With vue axios you need use '.data'. instead of '.response'

https://github.com/imcvampire/vue-axios#usage

answered Jan 14, 2017 at 3:06

Nicolas Vasquez

1

Collectives™ on Stack Overflow

vue-axios `catch` function doesn't trigger when expected

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related