VueJS HTTP请求错误500处理

本文介绍了VueJS HTTP请求错误500处理的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我遇到这个问题，我向API发出HTTP请求，如果出现错误（特别是错误500），JS就会中断或进入无限循环，我应该关闭窗口并重新打开页面。我需要的是一个弹出的消息，并以非常通用的方式解释发生了什么。我该怎么处理这种错误呢？

I am having this problem where I make HTTP Request to the API and in case of error ( specially error 500) the JS just breaks or goes into infinite loop and I should close the window and re-open the page. What I need is a message to pop up and in very generic way explain what happened. How should I handle this kind of error any ideas?

示例请求：

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

推荐答案

然后 接受第二次回调以处理错误。除了 .then 之外，您还可以提供 .catch 来处理更严重的故障。

then accepts a second callback to handle errors. You can also supply a .catch in addition to a .then to handle more severe failures.

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/ajax/libs/vue/2.2.6/vue.min.js"></script> <script src="cdn.jsdelivr/vue.resource/1.2.1/vue-resource.min.js"></script> <div id="app"> </div>