Angular 中的 Observable vs Promoise
Angular 是一個用於構建 Web 應用程式的框架。Angular 有兩種主要的資料管理型別：observables 和 promises。
Observables 和 Promises 的實現使我們更容易處理非同步程式，它們使用單獨的 API 並且動機略有不同。
本文將解釋什麼是 Angular 中的 Observable 和 Promise。此外，我們將解釋 Observable 和 Promise 之間的根本區別。
Angular 中的 Promise 是什麼
Promises 是一種 JavaScript 構造，它提供了一種處理非同步操作的方法。它們代表非同步操作的最終結果，可以處於以下三種狀態之一：掛起、完成或拒絕。
Promise 也可以連結在一起來表示一系列依賴的非同步操作。
此外，Promise 是一種可以在未來產生單個值的物件，可以是已解決的值，也可以是無法解決的原因，也可以是掛起的。
如果你仍然感到困惑，請將其應用於現實生活中。如果你向朋友做出承諾，你必須要麼履行承諾，要麼拒絕承諾；然而，有時你被困在中間，試圖履行承諾，但沒有做到。
同樣，程式設計中的 Promise 也可以作用於相同的過程。
Promise 的缺點包括：
- 失敗的呼叫無法重試。
- 隨著應用程式的增長，Promise 變得更加難以管理。
- 使用者無法取消對 API 的請求。
Angular 中的 Observable
Angular 中的 observables 到底是什麼？可以將其與最基本形式的 Promise 進行比較，並且隨著時間的推移它具有單個值。
另一方面，Observables 遠不止於此。Angular Observables 比 Promises 更強大，因為它具有許多優點，例如更好的效能和更容易除錯。
Observable 可以隨著時間的推移提供許多值，類似於流的工作方式，如果有任何錯誤，它可以快速終止或重試。Observables 可以以各種方式耦合，或者可能會競爭看誰可以使用第一個。
RxJS Observables 庫是一個強大的工具。此外，它們就像事件發射器，可以隨著時間的推移發出無限的值。
缺點：
- 你必須獲得一個複雜的
observable框架。 - 你可能會發現自己在意想不到的情況下使用
Observables。
Angular 中 Promise 和 Observable 的主要區別
讓我們討論一下 Promise 和 Observable 之間的一些區別。
Promise | Observable |
|---|---|
| 一旦一個承諾被履行，它的價值就不會改變。它們僅限於發出、拒絕和解析單個值。 | 使用 observables 可以在一段時間內發出多個值。它有助於一次檢索多個值。 |
| 延遲載入不適用於 promise。因此，Promise 會在它們形成時立即應用。 | Observable 在訂閱之前不會開始執行。這使得 Observables 在需要操作時很方便。 |
| Angular Promises 不是直接處理錯誤，而是總是將錯誤傳遞給孩子的 Promise。 | 錯誤處理是 Angular Observables 的責任。當我們使用 Observables 時，我們可以在一個地方處理所有錯誤。 |
| 一旦你開始承諾，你就不能退出承諾。Promise 將根據提供給 Promise 的回撥來解決或拒絕。 | 藉助 unsubscribe 方法，你可以隨時取消 observables。 |
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。
要檢視程式碼的演示，請單擊此處。
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