VueJS HTTPリクエストエラー500取り扱い

Question

私はAPIへのHTTPリクエストを行い、エラー（特にエラー500）が発生した場合、JSはちょうど中断したり、無限ループに入り、ウィンドウを閉じて、ページを開きます。私が必要とするのはポップアップするメッセージであり、非常に一般的なやり方で何が起こったのかを説明します。どのように私はこの種のエラーに対処する必要がありますか？

例要求：

this.$http.get('people', { params }).then(({ data }) => { 

      this.setFetching({ 
       fetching: false 
      }) 
     }) 

Answer 1

thenaccepts a second callbackエラーを処理します。さらに深刻な障害に対処するために.thenに加えて.catchを指定することもできます。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    fetching: true 
 
    }, 
 
    mounted() { 
 
    this.$http.get('people') 
 
     .then(() => { 
 
      this.setFetching({ 
 
      fetching: false 
 
      }) 
 
     }, 
 
     (err) => { 
 
      console.log("Err", err); 
 
     }) 
 
     .catch((e) => { 
 
     console.log("Caught", e); 
 
     }) 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script> 
 
<div id="app"> 
 
</div>