ember.js - 如何在 ember 中实现正确的全局 HTTP 错误处理

Question

我想要的是:全局处理不同 http 错误(401、404、500)的错误处理。 http 错误何时何地发生并不重要。

到目前为止，我在应用程序路由中实现了一个错误操作，该操作将在路由的 model Hook 上的任何适配器错误时调用。工作正常。

未涵盖的是我在其他上下文(如 record.save())中处理记录时的情况。我需要单独处理 promise 中的错误。

此外，我不仅想要一个默认的错误处理程序，而且更像一个后备。

好的，在谈论太多之前，让我们先看一个我的用例的示例实现。

申请途径

应用程序错误操作应该是默认/后备错误处理程序。

actions: {
  error: function(error) {
    var couldHandleError = false;

    if (error.errors) {
      switch (error.errors[0].status) {
        case '401':
          // User couldn't get authenticated.
          // Redirect handling to login.

          couldHandleError = true;
          break;
        case '404':
        case '500':
          // Something went unexpectedly wrong.
          // Let's show the user a message

          couldHandleError = true;
          break;
      }
    }

    // return true if none of the status code was matching
    return !couldHandleError;
  }
}

某些路线

在这种情况下，将调用应用程序错误操作。

model: function() {
  return this.store.findAll('post');
}

某些 Controller

在这种情况下，不会调用应用程序错误操作。

(我知道，下面的代码可能没有意义，但它只是为了说明我的要求)

this.store.findRecord('post', 123);

其他一些 Controller

在此示例中，当然不会调用应用程序错误操作，因为我在这里使用自己的处理程序 (catch())。但正如您在评论中看到的，我确实想对 404 之外的所有状态代码使用默认处理程序。

this.store.findRecord('post', 123).catch(function(reason) {
  if (reason.errors[0].status === '404') {
    // Do some specific error handling for 404
  } else {
    // At this point I want to call the default error handler
  }
});

那么有没有一种干净且经过批准的方法来实现这一目标？我希望我能向您解释我的问题。

Answer 1

我想我已经有了最终的解决方案，想与您分享。基本上，我采纳了评论我的问题的人的想法，并对其进行了扩展，以便它们满足我的需求。

首先，我创建了一个具有主要逻辑的 mixin。因为我希望它尽可能通用，所以它区分 a) Controller /路由和 b) jquery/适配器错误。因此，从哪里调用它以及错误对象最初来自 jquery Ajax 请求还是 ember 适配器都无关紧要。

import Ember from 'ember';

export default Ember.Mixin.create({

  ajaxError: function(error) {
    if (!error) {
      Ember.Logger.warn('No (valid) error object provided! ajaxError function must be called with the error object as its argument.');
      return;
    }

    // Depending whether the mixin is used in controller or route
    // we need to use different methods.
    var transitionFunc = this.transitionToRoute || this.transitionTo,
        couldHandleError = false;

    switch (this._getStatusCode(error)) {
      case 401:
        transitionFunc.call(this, 'auth.logout');
        couldHandleError = true;
        break;
      case 404:
      case 500:
        // Here we trigger a service to show an server error message.
        // This is just an example and currently not the final implementation.
        // this.get('notificationService').show(); 
        couldHandleError = true;
        break;
    }

    // For all other errors just log them.
    if (!couldHandleError) {
      Ember.Logger.error(error);
    }
  },

  _getStatusCode: function(error) {
    // First check for jQuery error object
    var status = error.status;

    // Check for ember adapter error object if it's not a jquery error
    if (!status && error.errors && error.errors[0].status) {
      status = parseInt(error.errors[0].status);
    }

    return status;
  },

});

接下来，我重新打开了一些类(在 app.js 中)以使此功能全局可用:

import AjaxErrorMixin from 'app/mixins/ajax-error';

Ember.Route.reopen(AjaxErrorMixin);
Ember.Controller.reopen(AjaxErrorMixin);

Ember.Component.reopen({
  _actions: {
    // Passing ajaxError per default
    ajaxError: function(error) {
      this.sendAction('ajaxError', error);
    }
  }
});

最后我向应用程序路由添加了一些操作:

actions: {
  error: function(error) {
    this.send('ajaxError', error);
  },

  ajaxError: function(error) {
    this.ajaxError(error);
  },
}

为什么我有两个 Action 做同样的事情？那么，error 操作会在路由模型钩子(Hook)出现错误时调用。我可以保留该操作，但在应用程序的其余部分中，我明确调用该操作，我想要一个更有意义的名称。因此我还创建了一个 ajaxError 操作。当然，您可以只采取一项行动。

现在您可以在任何地方使用它:

路由/ Controller :

this.ajaxError(错误);

组件:

this.sendAction('ajaxError', error);

当然，您还需要将操作传递出组件以由应用程序路由处理:

{{some-component ajaxError="ajaxError"}}

这也适用于嵌套组件。您不需要在 component.js 文件中进一步显式发送此操作，因为我们重新打开了组件并将此操作传递到其中。

我希望我可以帮助其他人实现这一点。也欢迎任何反馈。