在 MEAN Stack 中使用 Angular HTTP 客户端

在上一节中，我们使用 node 服务器后端获取了初始帖子。 本节会将我们的 node 服务器连接到 angular 应用程序并从那里获取帖子。使用 angular http 客户端并不容易。我们将通过以下方式使用 angular http 客户端从 angular 获取帖子

1) 转到 post.service.ts 文件的 getPosts() 函数。 在此函数中，我们需要访问我们的后端，获取帖子，将它们存储在帖子中，然后触发我们的更新侦听器以通知我们应用程序中感兴趣的任何人。

因此，在 getPosts() 方法中，我们需要发送一个 http 请求，并且使用 angular 发送 http 请求非常容易，因为它具有内置的 http 客户端。 现在，要使用 angular http 客户端，我们需要通过在 app.module.ts 文件中简单地导入它来解锁它，如下所示

现在，我们可以在我们的组件或服务中使用该 http 客户端。

2) 我们可以直接在我们的 post-list.component.ts 文件中使用它，但我们希望将此任务集中在我们的服务中。 它与该特定组件的模板或 UI 没有直接关系，我们可能也想在应用程序的其他部分中使用它。 因此，将此类 http 调用集中在服务中非常有意义。

我们需要将 angular http 客户端注入到服务中。 重要的是要知道，我们不仅可以通过使用构造函数将组件注入到服务中，还可以将其他东西注入到服务中，如下所示

在上面的代码中，构造函数采用 HttpClient 类型的私有变量作为参数。

3) 现在，我们可以在我们的 getPosts() 函数中使用它。 我们将从这里删除 return 语句并使用本地 http 属性，该属性有几个方法。 我们将使用 get 方法，并将目标路径传递给它，如下所示

4) 现在，它不会做任何事情，因为 http 客户端使用 observables。 它特别使用一个 observable，如果我们不监听它，它不会做任何事情，甚至不会发送请求，因为它包装了它，如果我们对响应不感兴趣，那么它为什么要发送请求？

因此，我们需要监听它，为此，我们需要使用 subscribe() 方法。 我们将在此处传递三个参数，即，第一个参数用于新数据，第二个参数用于错误，第三个参数用于完成时。

我们对新数据感兴趣，这将是响应，我们可能还想添加错误处理。 我们传递一个函数作为参数，每当我们收到响应时都会执行该函数。 在此函数中，我们已经回到了响应的主体，因为 angular http 客户端立即提供了对该主体的访问。

5) get 方法是一个泛型方法，我们必须清楚地指定我们将返回的值的类型。 响应的主体将是一个具有消息属性和帖子属性的对象。 因此，我们将通过以下方式定义值的类型

我们需要在此处添加一个重要的属性，即 ID，但我们需要为此更改模型中帖子的定义。 在后端，我们的帖子也有一个 ID，所以我们还需要通过以下方式将 ID 添加到我们的前端模型中

这些更改将在我们的 post.service.ts 文件中创建一个错误。 当我们创建一个新帖子时，我们需要通过以下方式定义 id

我们将 id 设置为 null，因为我们没有 ID，因为它尚未在服务器上生成。

6) 在 subscribe 函数中，我们将 PostData 作为参数传递给 subscribe() 函数。 我们将获得 typescript 支持和 IDE 支持，并使用它来获取我们的帖子数据并将它们存储到我们的帖子变量中，如下所示

7) 现在，我们需要通知我们的应用程序和我们应用程序的其他部分有关此更新，因此我们将调用 postUpdated 的 next，并在此函数中，我们将传递帖子的副本，如下所示

8) 我们将在我们的 post-list.component.ts 文件中看到一个错误。 现在，我们的 getPosts() 函数不返回任何内容，但在帖子列表组件中，我们希望返回帖子。 我们没有返回帖子，我们只是在帖子列表组件加载时触发了该 http 请求，如下所示

现在，如果我们保存它并在 localhost 4200 上运行它，我们将无法在我们的 angular 应用程序中看到服务器端数据。

如果我们转到浏览器的开发者工具，我们将看到以下错误

这是一个 CORS 错误，由于此错误，我们无法在我们的 angular 应用程序中看到我们的服务器端数据。 我们将在下一节中讨论 CORS 错误。