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