迹忆客 专注技术分享

Angular 是一个用于构建 Web 应用程序的框架。Angular 有两种主要的数据管理类型：observables 和 promises。

Observables 和 Promises 的实现使我们更容易处理异步程序，它们使用单​​独的 API 并且动机略有不同。

本文将解释什么是 Angular 中的 Observable 和 Promise。此外，我们将解释 Observable 和 Promise 之间的根本区别。

Angular 中的 Promise 是什么

Promises 是一种 JavaScript 构造，它提供了一种处理异步操作的方法。它们代表异步操作的最终结果，可以处于以下三种状态之一：挂起、完成或拒绝。

Promise 也可以链接在一起来表示一系列依赖的异步操作。

此外，Promise 是一种可以在未来产生单个值的对象，可以是已解决的值，也可以是无法解决的原因，也可以是挂起的。

如果你仍然感到困惑，请将其应用于现实生活中。如果你向朋友做出承诺，你必须要么履行承诺，要么拒绝承诺；然而，有时你被困在中间，试图履行承诺，但没有做到。

同样，编程中的 Promise 也可以作用于相同的过程。

Promise 的缺点包括：

1. 失败的调用无法重试。
2. 随着应用程序的增长，Promise 变得更加难以管理。
3. 用户无法取消对 API 的请求。

Angular 中的 Observable

Angular 中的 observables 到底是什么？可以将其与最基本形式的 Promise 进行比较，并且随着时间的推移它具有单个值。

另一方面，Observables 远不止于此。Angular Observables 比 Promises 更强大，因为它具有许多优点，例如更好的性能和更容易调试。

Observable 可以随着时间的推移提供许多值，类似于流的工作方式，如果有任何错误，它可以快速终止或重试。Observables 可以以各种方式耦合，或者可能会竞争看谁可以使用第一个。

RxJS Observables 库是一个强大的工具。此外，它们就像事件发射器，可以随着时间的推移发出无限的值。

缺点：

1. 你必须获得一个复杂的 observable 框架。
2. 你可能会发现自己在意想不到的情况下使用 Observables。

Angular 中 Promise 和 Observable 的主要区别

让我们讨论一下 Promise 和 Observable 之间的一些区别。

Angular 中的 Promise 和 Observable 示例

让我们讨论一个例子，它可以帮助我们详细理解 promise 和 observable 的概念。

TypeScript 代码：

import { Component } from '@angular/core';
import { Observable, Observer, } from "rxjs";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    promiseTemp: Promise<boolean>;
  createPromise() {
    this.promiseTemp = this.testPromise(0);
  }
  observableTemp: Observable<boolean>;

  createObservable() {
    this.observableTemp = this.testObservable(0);
  }

  subscribeObservable() {
    this.observableTemp
      .subscribe(
        result => {
          console.log(`Observable Ok: ${result}`);
        },
        err => {
          console.error(err);
        });
  }
  observableNextTemp: Observable<boolean>;
  createObservableNext() {
    this.observableNextTemp = this.testObservableNext(0);
  }
  promiseTemp2: Promise<boolean>;
  createToPromiseByObservable() {
    this.promiseTemp2 = this.testObservable(0).toPromise();
  }
  observableForkJoinTemp: Observable<boolean[]>;
  countForkJoin = 2;

  testObservable(value: number): Observable<boolean> {
    console.log("create Observable");
    return Observable.create((observer: Observer<boolean>) => {
      console.log("execute Observable");
      this.testPromise2(value)
        .then(result => {
          observer.next(result);
          observer.complete();
        })
        .catch(err => {
          observer.error(err);
          observer.complete();
        });
    });
  }

  testObservableNext(value: number): Observable<boolean> {
    console.log("create Observable Next");
    return Observable.create((observer: Observer<boolean>) => {
      console.log("execute Observable Next");
      this.testPromise2(value)
        .then(result => {
          observer.next(result);

          setTimeout(() => {
            observer.next(result);
            observer.complete();
          }, 5000);

        })
        .catch(err => {
          observer.error(err)
        });
    });
  }

  testPromise(value: number): Promise<boolean> {
    console.log("creation");
    return new Promise((resolve, reject) => {
      console.log("execution");
      this.testPromise2(value)
        .then(result => {
          resolve(result);
        })
        .catch(reject);
    });
  }

  testPromise2(value: number): Promise<boolean> {
    return new Promise((resolve, reject) => {
      if (value > 1) {
        reject(new Error("testing"));
      } else {
        resolve(true);
      }
    });
  }
}

HTML 代码：

<h2>Example of Promise and Observable </h2>

<br/>
<button (click)="createPromise()">Create Promise</button>
<br/>
<br/>
<button (click)="createObservable()">Create Observable</button>
<br/>
<br/>
<button (click)="subscribeObservable()">Subscribe Observable</button>
<br/>
<br/>
<button (click)="createObservableNext()">Create Observable Next</button>
<br/>
<br/>
<button (click)="createToPromiseByObservable()">Create Promise by Observable</button>
<br/>

在 promise 和 observable 之间哪个更容易使用？所以这里是这个问题的简单答案。

Promise 在 Angular 中用于解决异步操作，当数据来自 API 等外部源时，使用 Observables。

Promise 可以用单个值或一组值来解决，并且 Observables 会随着时间的推移发出一个或多个值。

因此，在管理 HTTP 搜索时，Promise 只能处理同一请求的单个响应；但是，如果同一个请求有多个结果，我们必须使用 Observable。