Vue.js + Element UI: 常见的HTTP请求错误处理方法？

Question

我想集中处理当我使用 vue-resource 调用任何 http 请求方法（$http.post、$http.delete 等...）时可能发生的 HTTP 请求错误。

我知道我可以处理任何单个请求的错误，如下所示：

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

但是，我想我是否可以为任何 HTTP 请求定义和设置 onFailure 回调函数。我想在应用程序级别或类似的级别处理任何 http 错误。

我的目标是在 HTTP 请求失败时显示一条通用 toast 消息。

任何形式的帮助都会很棒。谢谢。

Answer 1

我认为你喜欢使用的概念是interceptors。在 vue-resource 中，您可以为 request 和 response 定义它们。拦截器示例：

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

  // modify request ...

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

Answer 2

感谢 C Sharper 提供了很好的起点。我在这里写了我的后代最终解决方案。

我已经检查了拦截器中的 response 状态，如果不是 ok，它将使用 $alert() 函数向最终用户显示一条消息。

这里是代码：

Vue.http.interceptors.push(function(request, next) {
    next((response) => {
        if (!response.ok) {
            let message = "<summary>Unexpected error</summary><details>Error: " + response.status + " " + response.url + "</details>";
            this.$alert(message, 'Error', {
                "type" : "error",
                "dangerouslyUseHTMLString" : "true"
            });
        }
        return response;
    });
}

Vue.js + Element UI: 常见的HTTP请求错误处理方法？

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

javascript

vue.js

vue-resource

element-ui