vue-axios `catch`関数が予期したときに起動しない

Question

ユーザーがgithubのユーザー名を検索し、ユーザーのフルネーム、ログイン名、国名を確認できる単一のファイルコンポーネントにVueアプリケーションがあります。

<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のaxiosの約束で、私はそのエラーがコンソールに記録されると予想しますが、そうではありません。私がこの機会を処理できる理由は、何も検索されていないか、無効な検索が行われたときにプレースホルダーのテキスト() is from !が欲しくないということです。

私はv-ifのチェックのためにちょうどdataの代わりにdata.lengthを使用しようとしましたが、これは私のコンポーネントが '反応しない'ようです。私はVueのdevツールでデータの変更を見ることができますが、コンポーネントには反映されていません。ここで何が起こっているのでしょうか？あなたはエラー変数に「.response」を置く必要http://www.webpackbin.com/VJlfcrGLM

Answer 1

axiosでエラーを処理するために：ここで

は、アプリのwebpackbinのデモです。このように：

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

あなたは同じようにVueAxiosなしaxiosを使用することができます。

vue axiosでは '.data'を使用する必要があります。代わりに「.response」

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

Answer 2

あなたのコードのユーザーが存在しないとき、それは実際にcatchブロックに入り、細かい動作しているようです。

チェック作業webpackbin here。

私は新しい変数errorMsgを作成し、これを割り当てています：catchブロックで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> 

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

これは実際にキャッチブロックに入り、それに応じてerrorMsgという変数が割り当てられていることがわかります。必要に応じて適切な変更を加えることができます。