如何将 JSON:API 与 Angular/RxJs 一起使用？

Question

我有一个遵循 json:api 规范 的 (Laravel) API。一切都很顺利——使用 Postman，我可以请求相关资源等。

我在前端使用 Angular，但我很难理解如何使用这个 api。

我一直在阅读这个SO线程作为起点。

我使用 ngrx 进行状态管理；我能够成功发出从我的 api 获取数据所需的适当请求。我纠结的是如何正确处理响应。

这是我请求组织的响应示例：

// response from /api/v1/organization/:id

data: {...}
jsonapi: {...}
links: {...}

这是我的

Organization

界面：

export interface IOrganization {
    data: object;
    jsonapi: object;
    links: object;

    // before json:api I would just use the below attributes
    id?: string;
    name: string;
    streetAddress1: string;
    createdAt?: Date;
    updatedAt?: Date;
    deletedAt?: Date;
}

在使用 json:api 之前，这个类非常简单。但由于所有数据现在都在

data.attributes

内部，我不确定如何正确构建此界面。

这是我的

organization.effects

文件的大部分内容：

return this._organizationService
    .getOrganization(action.organizationId)
    .pipe(
        tap((organization) => {
            console.log(organization);   // {data:{...}, jsonapi: {...}, data:{...}
        }),
        map((organization) =>
            OrganizationApiActions.loadOrganizationSuccess({
                organization,
            })
   ),
   catchError((error) => {...}
    ...

解决方案是否只是向下钻取此处的属性？

organization.data.id;
organization.data.attributes.name;

或者有更合乎逻辑的方式来使用这个api吗？我已经看到了 ngx-jsonapi 包。不知道这样说是不是太过分了？

过去使用 vue.js 我只使用过 jsona npm 包

使用 json:api（rest api）的理想方式是什么？

Answer 1

如果您不直接按原样使用 api（前端的后端），那么

• 有2种接口模型，
  • 描述后端响应（最好是代码生成或推断而不是手动编写）
  • 以及您想要映射到的前端模型
  • 使用将后端对象映射到前端的函数
  • 在收到回复时使用。

const mapJsonApiToOrganization = () =>
  map((response: OrganizationResponse) => {
    const { id, attributes } = response.data;
    return {
      id,
      name: attributes.name,
      streetAddress1: attributes.streetAddress1,
      // ... other mappings
    };
  });

// In your effect
return this._organizationService.getOrganization(action.organizationId).pipe(
  mapJsonApiToOrganization(),
  // from here frontend model only
  map((organization: Organization) => OrganizationApiActions.loadOrganizationSuccess({ organization })),
);

Imo 我只会保留传递给 ngrx 前端模型的数据。如果您更改后端，您只想更改映射函数。

使用第 3 方软件包需要做出判断。如果前端模型钻探只是这 5 个属性似乎没问题。