技术文章

对于 Angular，有两种主要的数据管理类型：使用 Observables 或 Promises，两者都能够管理 JavaScript 中的异步代码。乍一看，Observables 被视为 Promise 的更高级替代品。但事实上，它们是完全不同的。从拥有单独的 API，到拥有不同的动机，再到提供处理 JavaScript 中异步模型的不同方法，Angular Observables 和 Angular Promises 都有自己的能力。

如何知道哪一个适合您的 Angular 项目？让我们详细讨论它们，比较每个实现，看看它们的功能、优点和缺点。除此之外，我将演示如何将 Angular Observables 和 Angular Promises 与我们的低代码 App Builder tm 一起使用，以便您可以轻松快速地处理异步事件。

本文将介绍以下内容：

• 
  

• 如何在 Angular 中创建 Observable？

• 如何在 Angular 中创建 Promise？

• Angular 中的 Promise 是什么？
  

• Angular 中的 Observable 是什么？ 

• 如何在 App Builder 中使用 Angular Observables 和 Promise？

• Angular Observable 与 Promise：有什么区别？ 

尝试 IGNITE UI FOR ANGULAR

Angular 中的 Promise 是什么？

Angular中的 Promise提供了一种简单的方法来执行使用回调的异步函数，同时一次发出和完成（解析或拒绝）一个值。使用 Angular Promise 时，您可以从 API 发出单个事件。然后，控制器（或指令）开始注册最多三个回调 - 成功、错误和/或通知。

Angular Promise 有四种状态：

• 已完成 - 行动已完成

• 被拒绝 - 操作失败

• 待处理 - 操作尚未成功或失败

• 已解决 - 操作已完成或已拒绝

需要记住的是，与 Observable 相比，Angular Promise 更加被动，一旦启动就无法取消。换句话说，当您将回调传递给 Promise 构造函数（控制器或指令）时，它将解析或拒绝该函数。

现在，Angular Promise 有几个缺点。

• Promise 不可取消，您必须等到回调返回错误或成功。

• 不适合集中式和可预测的错误处理，因为错误会发送到子承诺。

• 他们不提供任何操作。

• Promise 仅执行一次异步值。

• 随着时间的推移，不能用于多个值。

• 对于较大的应用程序，它们变得难以管理。

• 它们无法重试。

如何在 Angular 中创建 Promise？

要在 Angular 中创建 Promise，我们只需要使用“new Promise(function)”语法。Promise 构造函数将函数作为参数，而内部函数将resolve 和reject 作为参数。

让我们看看下面的代码片段是怎样的。

现在我们知道如何创建 Angular Promise，我们将使用它来实现一个非常简单的场景。创建的 Promise 将帮助我们验证该数字是否为素数。

最后，为了使用我们的方法，我们将按以下方式处理 Promise。

Angular 中什么是可观察的？

Observables 为您提供了更多功能，因为它们允许开发人员异步和同步运行函数。它们表示可以处理 0、1 或多个事件的值流，每个事件使用相同的 API。我个人喜欢 Angular Observables 的一点是简化编码的运算符数量，包括：retry() 或 replay()、map、forEach、reduce 等等。

就像 Angular Promise 一样，Angular 中的 Observables 也有其缺点。

• 浏览器本身并不支持 Observables。

• 他们要求 RxJS 操作员获得新的定制值流。

• 使用可观察量调试代码可能更具挑战性。

• 您必须具备额外工具和技术的知识来测试 RxJS 代码。

如何在 Angular 中创建可观察对象？

要在 Angular 中创建 Observable，首先需要从 rxjs 导入 Observable，因为正如我们上面了解到的，它们本身并不支持。

要创建一个新的 Observable，我们只需要使用它的构造函数并添加将在订阅时执行的逻辑。在我们的例子中，我们将创建一个 Observable，它将为我们的Angular 网格组件返回一个很棒的数据源。

之后我们剩下的就是订阅创建的 Observable 并将接收到的数据作为数据源绑定到我们的Angular 组件。

使用可观察量的用例的一个很好且更有意义的示例是将 IgxGrid 与远程数据结合使用。正如您在示例中所看到的，在渲染组件时，最初仅获取一小部分数据，并且在执行的每个滚动或数据操作中都会获取一段新数据。Any[] 类型的可观察量使用异步 Angular 管道直接绑定到网格。异步管道订阅 Observable 或 Promise 并返回其发出的最新值。

单击此处查看示例并立即检查代码。

如何在 App Builder 中使用 Angular Observable 和 Promise？

正如我们从上面所写的内容中了解到的，使用 Observables 最常见的场景是当我们需要将数据绑定到某个组件时。要获取数据，我们必须使用 HttpClient 发出 http 请求。最好的方法是将其作为单独的服务进行。所有 HttpClient 方法都会返回某个 RxJS Observable。一般来说，随着时间的推移，Observable 可以返回多个值，但是来自 HttpClient 的 Observable 总是发出单个值，然后完成，永远不会再次发出。

在 App Builder 中，将组件绑定到数据源既简单又直观。目前，您可以选择以下选项来使用我们预定义的数据源之一：

• 上传 JSON 文件或将 URL 添加到包含您的数据的 JSON 文件。

• 添加/上传一个Swagger定义文件，其中描述了服务器的所有端点，您可以在那里直接获取真实的数据表单。

之后，无论您选择哪种方法，都可以使用道具面板中的数据下拉菜单将数据绑定到组件 - 例如绑定到 Angular 网格。

现在我们可以在 Angular 中查看生成的代码。我们为您提供单独的服务，其中使用 http get 方法执行数据获取。

您可以在 MasterViewComponent ts 文件中看到数据服务执行的订阅。在此基础上，您可以在必要时执行更复杂的场景。

Angular Observable 与 Promise：有什么区别？

为了展示 Angular 中的 Observables 和 Promise 之间的差异，我决定制作一个表格。这样您将能够以更易于理解和超级简洁的方式比较它们。

显然，在 Angular Observable 与 Promise 的比较中，Observable 获胜。那么，有充分的理由使用 Promise 吗？绝对地。

首先，可观察量是有一定成本的。正如我之前提到的，浏览器本身并不支持它们。这意味着您必须实现 RxJS 库。虽然它可以帮助您创建异步或基于回调的代码，但其捆绑包大小可能超过 17.4kb。

其次，当你的Angular 应用默认是异步的时，没有比使用 Angular Promise 更好的方法来处理所有异步函数和事件了。是不是这样？

接下来，如果您不想使用响应式样式或不关心值流和可取消事件，那么请选择 Angular 中的 Promises。