VueJS HTTP请求错误500处理

时间:2017-03-29 12:03:10

标签: http error-handling vue.js http-status-code-500

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

示例请求:

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

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

1 个答案:

答案 0 :(得分:3)

then accepts a second callback处理错误。除了.catch之外,您还可以提供.then来处理更严重的故障。

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>