Vue.js + Element UI: How to handle HTTP request errors commonly?

Question

I'd like to centralize HTTP request errors that can occours when I call any http request method like ($http.post, $http.delete, etc...) using vue-resource.

I know I can handle errors for any single request like following:

this.$http.post(restUrl, payload).then(onSuccess, onFailure);

But, I guess if I can define and set the onFailure callback function for any HTTP requests. I'd like to handle any http errors at application-level or something similar.

My goal is to show a generic toast message when an HTTP request fails.

Any kind of help would be great. Thanks.

Answer 1

I think the concept that you like to use are interceptors. In vue-resource you can define them for request and response. An example for a interceptor:

Vue.http.interceptors.push(function(request, next) {

  // modify request ...

  // stop and return response
  next(request.respondWith(body, {
    status: 404,
    statusText: 'Not found'
  }));
});