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