ember.js - 使用(现在默认)Ember Data JSON-API 适配器处理错误

Question

我正在使用 Ember 1.13.7 和 Ember Data 1.13.8，它们默认使用 JSON-API 标准来格式化发送到 API 和从 API 接收的有效负载。

我想使用 Ember Data 的内置错误处理来向用户显示红色的“错误”表单字段。我已经按照 JSON-API 标准格式化了我的 API 错误响应，例如

{"errors":[
    {
        "title":"The included.1.attributes.street name field is required.", 
        "code":"API_ERR", 
        "status":"400", 
    }
]}

当我尝试保存我的模型时，错误回调被正确执行。如果我查看 Ember Inspector，我可以看到模型的“isError”值设置为 true，但我看不到 Ember Data 如何知道模型中的哪个字段处于错误状态？我从官方 JSON-API 页面 ( http://jsonapi.org/format/#errors ) 中看到，您可以在错误响应中包含一个“源”对象:

source: an object containing references to the source of the error, optionally including any of the following members:

pointer: a JSON Pointer [RFC6901] to the associated entity in the request document [e.g. "/data" for a primary data object, or "/data/attributes/title" for a specific attribute].

parameter: a string indicating which query parameter caused the error.

但这是我应该做的，以便告诉 Ember Data 它应该将哪些字段标记为处于错误状态？

如果有人可以帮助阐明这一点，我将不胜感激。

谢谢。

Answer 1

请注意，以下答案基于以下版本:

DEBUG: -------------------------------
ember.debug.js:5442DEBUG: Ember                     : 1.13.8
ember.debug.js:5442DEBUG: Ember Data                : 1.13.9
ember.debug.js:5442DEBUG: jQuery                    : 1.11.3
DEBUG: -------------------------------

不幸的是，错误处理文档目前分散在各处，因为您处理不同适配器(Active、REST、JSON)错误的方式都有点不同。

在您的情况下，您想要处理表单的验证错误，这可能意味着验证错误。可以在此处找到 JSON API 指定的错误格式: http://jsonapi.org/format/#error-objects

您会注意到该 API 仅指定在由 errors 键控的顶级数组中返回错误。所有其他错误属性都是可选的。所以看起来所有 JSON API 需要的是以下内容:

{
    "errors": [
     {}
    ]
}  

当然，这不会真正做任何事情，因此对于 Ember Data 和 JSONAPIAdapter 开箱即用的错误，您至少需要包含 detail属性和 source/pointer属性。 detail属性被设置为错误消息和 source/pointer属性让 Ember Data 找出模型中的哪个属性导致了问题。因此，Ember Data 要求的有效 JSON API 错误对象(如果您使用的是现在默认的 JSONAPI)是这样的:

{
    "errors": [
     {
        "detail": "The attribute `is-admin` is required",
        "source": {
             "pointer": "data/attributes/is-admin"
         }
     }
    ]
}  

请注意 detail不是复数(对我来说是一个常见错误)并且 source/pointer 的值不应包含前导正斜杠，属性名称应为虚线。

最后，您必须使用 HTTP 代码 422 返回验证错误。这意味着“不可处理的实体”。如果您没有返回 422代码然后默认 Ember Data 将返回 AdapterError并且不会在模型的 errors 上设置错误消息哈希。这让我有点担心，因为我使用的是 HTTP 代码 400 (Bad Request) 将验证错误返回给客户端。

ember 数据区分这两种错误的方式是验证错误返回 InvalidError对象( http://emberjs.com/api/data/classes/DS.InvalidError.html )。这将导致 errors在要设置的模型上散列但不会设置 isError标志为真(不知道为什么会这样，但在此处记录: http://emberjs.com/api/data/classes/DS.Model.html#property_isError )。默认情况下，除了 422 之外的 HTTP 错误代码将导致 AdapterError被退回和 isError标志设置为 true .在这两种情况下，promise 的拒绝处理程序都会被调用。

model.save().then(function(){
    // yay! it worked
}, function(){
    // it failed for some reason possibly a Bad Request (400)
    // possibly a validation error (422)
}

默认情况下，如果返回的 HTTP 代码是 422并且您拥有正确的 JSON API 错误格式，然后您可以通过访问模型的错误散列来访问错误消息，其中散列键是您的属性名称。散列以驼峰格式键入属性名称。

例如，在我们上面的json-api错误示例中，如果 is-admin出现错误您将像这样访问该错误:

model.get('errors.isAdmin');

这将返回一个包含错误对象的数组，其格式如下:

[
   {
      "attribute": "isAdmin",
      "message": "The attribute `is-admin` is required"
    }
]

本质上 detail映射到 message和 source/pointer映射到 attribute .如果您在单个属性上有多个验证错误，则会返回一个数组(JSON API 允许您返回多个验证错误，而不是仅返回第一个失败的验证)。您可以直接在模板中使用错误值，如下所示:

{{#each model.errors.isAdmin as |error|}}
    <div class="error">
      {{error.message}}
    </div>
{{/each}}

如果没有错误，那么上面将不会显示任何内容，因此它可以很好地处理表单验证消息。

如果您的 API 不使用 HTTP 422验证错误的代码(例如，如果它使用 400 )，那么您可以通过覆盖 handleResponse 来更改 JSONAPIAdapter 的默认行为自定义适配器中的方法。这是一个返回新 InvalidError 的示例任何 HTTP 响应状态代码的对象 400 .

import DS from "ember-data";
import Ember from "ember";

export default DS.JSONAPIAdapter.extend({
  handleResponse: function(status, headers, payload){
    if(status === 400 && payload.errors){
      return new DS.InvalidError(payload.errors);
    }
    return this._super(...arguments);
  }
});

在上面的示例中，我正在检查 HTTP 状态是否为 400并确保存在错误属性。如果是，那么我创建一个新的 DS.InvalidError并返回。这将导致与期望 422 的默认行为相同的行为。 HTTP 状态代码(即，将处理您的 JSON API 错误并将消息放入模型上的错误散列中)。

希望有帮助!