Функция `catch` vue-axios не срабатывает, когда ожидается

Question

У меня есть приложение Vue в одном файловом компоненте, которое позволяет пользователю искать имя пользователя github и видеть полное имя, логин и страну, из которой пользователь.

Вот мой компонент:

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

Мой вопрос: Я не могу найти способ, чтобы справиться с ситуацией, в которой пользователь вводит пользователь, который не существует в GitHub. С блоком catch обеими аксиомами я ожидаю, что ошибка будет записана на консоль, но это не так. Причина, по которой я хочу иметь возможность справиться с этим случаем, заключается в том, что я не хочу, чтобы текст заполнителя () is from !, когда ни один из них не был обыскан, или недействительный поиск был выполнен.

Я пытался использовать data.length вместо просто data для v-if проверки, но это, кажется, как мой компонент не «реагировать», когда это дело; Я вижу изменения данных в инструментах Vue dev, но не в компоненте. Что может быть здесь?

Вот webpackbin демо-приложения: http://www.webpackbin.com/VJlfcrGLM

Answer 1

Для обработки ошибки с Аксиос вам нужно поместить «.response» в переменной ошибки. Как это:

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

Вы можете использовать AXIOS без VueAxios таким же образом.

С помощью vue axios вам необходимо использовать «.data». вместо «» .response

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

Answer 2

Вы код, кажется, работает нормально, он на самом деле идет в catch блоке, когда пользователь не существует.

Проверка работы webpackbin here.

У меня есть создать новую переменную errorMsg и назначение этого: this.errorMsg = 'user does not exist' в блоке поймать, и изменил вам HTML следующим образом, чтобы показать это в представлении:

в HTML

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

в экземпляре Vue

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

Вы можете видеть, что это действительно происходит в блоке catch и соответственно назначает переменную errorMsg. Вы можете внести соответствующие изменения в соответствии с вашими требованиями.