javascript - Vue.js + Element UI：常见的 HTTP 请求错误如何处理？

Question

我想集中使用$http.post.$http.deletevue-resource

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

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

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

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

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

Answer 1

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

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;
    });
}