Angular 中的 Observable vs Promoise

Muhammad Adil 2023年1月30日
  1. Angular 中的 Promise 是什麼
  2. Angular 中的 Observable
  3. Angular 中 Promise 和 Observable 的主要區別
Angular 中的 Observable vs Promoise

Angular 是一個用於構建 Web 應用程式的框架。Angular 有兩種主要的資料管理型別:observablespromises

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 之間的一些區別。

Promise Observable
一旦一個承諾被履行,它的價值就不會改變。它們僅限於發出、拒絕和解析單個值。 使用 observables 可以在一段時間內發出多個值。它有助於一次檢索多個值。
延遲載入不適用於 promise。因此,Promise 會在它們形成時立即應用。 Observable 在訂閱之前不會開始執行。這使得 Observables 在需要操作時很方便。
Angular Promises 不是直接處理錯誤,而是總是將錯誤傳遞給孩子的 Promise。 錯誤處理是 Angular Observables 的責任。當我們使用 Observables 時,我們可以在一個地方處理所有錯誤。
一旦你開始承諾,你就不能退出承諾。Promise 將根據提供給 Promise 的回撥來解決或拒絕。 藉助 unsubscribe 方法,你可以隨時取消 observables。

Angular 中的 PromiseObservable 示例

讓我們討論一個例子,它可以幫助我們詳細理解 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。

要檢視程式碼的演示,請單擊此處

作者: Muhammad Adil
Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

相關文章 - Angular Promise

相關文章 - Angular Observable