如何使用 Ember 数据处理 REST API？

Question

我正在尝试将 ember 数据与来自服务器的 REST API 一起使用。该项目非常简单，可以与Fetch API 配合使用，但我想使用Ember data 实现相同的结果并了解它的原理。我无法在此配置中使用 ember twiddle。以下将是该项目的主要部分。它是由Ember CLI 4.0.1 版制作的。

来自 url http://localhost:3000/api/v1/items 的 JSON 响应看起来像：

[
  {
    "id": 1,
    "name": "Item 1",
    "description": "12345",
    "created_at": "2022-01-07T11:43:21.755Z",
    "updated_at": "2022-01-07T11:43:21.755Z"
  },
  {
    "id": 2,
    "name": "Item 2",
    "description": "22222",
    "created_at": "2022-01-07T11:43:29.787Z",
    "updated_at": "2022-01-07T11:43:29.787Z"
  },
  {
    "id": 3,
    "name": "Item 3",
    "description": "33333",
    "created_at": "2022-01-07T11:43:37.885Z",
    "updated_at": "2022-01-07T11:43:37.885Z"
  }
]

来自http://localhost:3000/api/v1/items/1等单个项目请求的响应：

{
    "id": 1,
    "name": "Item 1",
    "description": "12345",
    "created_at": "2022-01-07T11:43:21.755Z",
    "updated_at": "2022-01-07T11:43:21.755Z"
}

app/models/item.js:

import Model, { attr } from '@ember-data/model';

export default class ItemModel extends Model {
  @attr name;
  @attr description;
}

app/routes/items.js:

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ItemsRoute extends Route {
  @service store;
  async model() {
    return this.store.findAll('item');
  }
}

app/routes/item.js:

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ItemRoute extends Route {
  @service store;
  async model(params) {
    return this.store.findRecord('item', params.id);
  }
}

app/templates/items.hbs:

{{#each @model as |item|}}
  <LinkTo @route='item' @model={{item}}>{{item.name}}</LinkTo>
{{/each}}

app/adapters/application.js:

import RESTAdapter from '@ember-data/adapter/rest';

export default class ItemAdapter extends RESTAdapter {
  host = 'http://localhost:3000';
  namespace = 'api/v1';

  buildURL(...args) {
    return `${super.buildURL(...args)}.json`;
  }
}

app/serializers/application.js:

import RESTSerializer from '@ember-data/serializer/rest';

export default class ItemSerializer extends RESTSerializer {}

app/router.js:

import EmberRouter from '@ember/routing/router';
import config from 'dist/config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function () {
  this.route('items');
  this.route('item', { path: '/:id' });
});

当我在 ember 客户端上移动到路由 /items 时，控制台中出现以下错误：

警告：在负载中遇到“0”，但未找到模型的模型 名称“0”（使用解析的模型名称 .modelNameFromPayloadKey("0"))

“1”和“2”的错误相同。模板不会在 each 循环中呈现链接。

可能Ember data 和REST API 有一些功能，我很想弄清楚。感谢关注！

Answer 1

我相信您有这个问题，因为您的数据不是RESTSerializer 格式，而是JSONSerializer one：

JSONSerializer 期望响应是一个 JSON 对象，看起来 类似的

{
  "id": "1",
  "title": "Rails is omakase",
  "tag": "rails",
  "comments": ["1", "2"]
}

所以我想你应该只使用这个。

如果出于任何原因您想保留RESTSerializer，您应该返回类似于以下格式的数据：

{
"item":
  {
    "id": 1,
    "name": "Item 1",
    "description": "12345",
    "created_at": "2022-01-07T11:43:21.755Z",
    "updated_at": "2022-01-07T11:43:21.755Z"
  }
}

或列表

{
"items": [
  {
    "id": 1,
    "name": "Item 1",
    "description": "12345",
    "created_at": "2022-01-07T11:43:21.755Z",
    "updated_at": "2022-01-07T11:43:21.755Z"
  },
  ...
]