从 Ember 数据返回承诺时出错

Question

我正在开发我的第一个 Ember 应用程序并让它以我想要的方式显示，路由从 model():

返回一个静态 JSON 对象

element: {
  name: "First Element",
  divisions: [{
    name: "First Division",
    sets: [{name: "Set 1"},{name: "Set 2"},{name: "Set 3"}]
  }, {
    name: "Second Division",
    sets: [{name: "Set 1"},{name: "Set 2"},{name: "Set 3"}]
  }]
}

现在我正在尝试重构以使用 Ember Data + Mirage 并度过了一段糟糕的时光。

这是我的index.js路线

export default Ember.Route.extend({
    model() {
        return this.store.find('element', 1);
    },

如果我这样设置 Mirage config.js：

  this.get('/elements', function() {
    return {
      elements: [
          {
            id: 1,
            name: 'First Element',
            divisions: [1, 2]
          }
      ]
    }
  });

然后我得到这个错误：

Your Ember app tried to GET '/elements/1', but there was no route defined to handle this request.

如果我这样设置 Mirage config.js：

  this.get('/elements/1', function() {
    return {
       id: 1,
       name: 'First Element',
       divisions: [1, 2]
    }
  });

然后我得到这个错误：

22:46:40.883 "Error while processing route: index" "Assertion Failed: normalizeResponse must return a valid JSON API document:
    * One or more of the following keys must be present: "data", "errors", "meta"." "EmberError@http://localhost:4200/assets/vendor.js:25582:15

编辑：

所以这不是所述问题的解决方案，但它让我克服了这个问题。我放弃了 Pretender，并根据这个优秀的教程重新开始创建一个实际的 Rails 服务器：http://emberigniter.com/modern-bridge-ember-and-rails-5-with-json-api/

我能够通过这种方式做我想做的一切，如果我想把它变成一个生产应用程序，我就更接近了。

Answer 1

所以问题是您实际上没有遵守 JSON API specification. You can solve this by reading Mirage's page on how to conform。

本质上，在 GET /foo/1 调用的情况下，您需要在 JSON 响应的顶层返回一个对象。对于 GET /foo，您还需要将 "elements" 属性更改为 "data"，这应该可以解决问题。目前还没有一种开箱即用的简单、可重复使用的方法来执行此 Mirage。对于这两个问题，目前最好的选择是使用 issue.

中提供的解决方案

Answer 2

ember错误normalizeResponse must return a valid JSON API document
可以通过三种方式修复

return 一个有效的 JSONAPI 响应

查看您的错误消息：

normalizeResponse must return a valid JSON API document:
* One or more of the following keys must be present: "data", "errors", "meta".

  this.get('/elements/1', function() {
    return {
      data: {
        id: 1,
        name: 'First Element',
        divisions: [1, 2]
      }
    }
  });

另见 https://jsonapi.org/examples/

标准化所有响应

// app/serializers/application.js

import EmberData from "ember-data";

export default EmberData.JSONAPISerializer.extend({
    normalizeResponse() {
        return {
            data: this._super(...arguments),
        };
    },
    //normalize(){},
    //serialize(){},
    // ...
});

问题：错误处理

通过将所有响应包装在 { data: ... } 中，它们永远不会 return 错误

出现错误时，响应应为

  this.get('/elements/1', function() {
    return {
      errors: [
        {
          id: 12345,
          title: 'title for error #12345'
        }
      ]
    }
  });

另见 https://jsonapi.org/format/#error-objects

用 REST 替换 JSONAPI

sed -i 's/JSONAPISerializer/RESTSerializer/g' app/serializers/*.js
sed -i 's/JSONAPIAdapter/RESTAdapter/g' app/adapters/*.js

ember 文档：adapters and serializers

重复：

从 Ember 数据返回承诺时出错

Error returning promise from Ember Data

ember.js

ember-data

ember-cli-mirage

return 一个有效的 JSONAPI 响应

标准化所有响应

用 REST 替换 JSONAPI