VueJS HTTP request error 500 Handling

Question

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?

Example Request:

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

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

Roy J · Accepted Answer · 2017-03-29 14:20:37Z

7

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

answered Mar 29, 2017 at 14:20

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS HTTP request error 500 Handling

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related