如何在 Angular 中使用 HATEOAS REST API？答案

【问题标题】：How to consume a HATEOAS REST API in Angular?如何在 Angular 中使用 HATEOAS REST API？
【发布时间】：2017-07-25 22:46:21
【问题描述】：

我正在为另一个团队构建的 API 开发 Angular 4 前端。 API 遵循 HATEOAS 并为我提供每个响应的超媒体链接。

我知道 API 的形式，并且我认为我可以轻松地将 URL 硬编码到 Angular 服务中。但是，一位同事（他是后端开发人员）试图说服我应该充分利用超媒体，因为这意味着前端和后端之间的耦合更少（如果 API 发生变化，可能会出现损坏）。

但是，我什至不知道如何使用 Angular 的内置 Http 服务来实现一个简单的 HATEOAS 模式。我将如何以一种不会将所有服务耦合在一起并使它们难以测试的方式存储/共享超媒体/URL 信息？好像没有例子。

尝试创建一个对 HATEOAS 友好的 HTTP 客户端是个好主意，还是不值得这么麻烦？

【问题讨论】：

您可以使用 rel 属性在响应中找到 url，然后将此 url 存储到实体本身。例如，当您收到产品列表时，每个产品详细信息页面的链接都会从响应中获取并存储在您的角度模型中。
谢谢。是我一个人，还是这似乎违反了单一责任原则？为什么要在 API 上的 details/edit/update URL 中嵌入产品信息？
我不这么认为。它只是元信息，与产品实体高度内聚。如果您硬编码/构建 url，那么您将创建不必要的依赖项并添加额外的责任。
另请参阅此处以获得一些灵感：github.com/mdvorak/resource-router 按媒体类型驱动视图的角度路由引擎。它自己加载数据，并通过响应 Content-Type 标头显示配置的视图。它是原始 Angular 路由器的替代品（它们不能同时使用）。

【解决方案1】：

您的同事说得对，您应该使用后端提供的元信息。通过这种方式，您不会将责任放在不属于那里的客户身上。为什么客户端应该知道从哪里获取实体？存储实体（实际上是一般的数据）是后端的责任。后端拥有数据，它决定将数据放在哪里，如何访问它，何时更改位置或持久性类型，以及与存储数据相关的任何事情。

如何以一种不将所有服务耦合在一起并使其难以测试的方式存储/共享超媒体/URL 信息？

为什么您认为使用 HATEOAS 会使测试变得更加困难？它不会，实际上不使用它会使测试变得更加困难，因为 URL 是静态的，这使得后端不可存根。

您可以从后端响应中提取信息，并将其作为元信息存储在角度模型中、_meta 键或类似的东西上。

【讨论】：

如何解读rel链接含义？例如，如果有 rel='create' 和 rel='prev_page' - 客户端必须了解每个 rel 类型的语义含义。对吗？
@Felix 是的，没错。客户必须知道其含义。
如果正确实施，我不相信你会有rel='prev_page'，因为这意味着后端控制状态和前端导航并且两者是紧密耦合的