在Angular中Promise和Observable之间有什么区别?
每一个例子都有助于理解这两种情况。在什么情况下,我们可以使用每种情况?
在Angular中Promise和Observable之间有什么区别?
每一个例子都有助于理解这两种情况。在什么情况下,我们可以使用每种情况?
当前回答
还有一个区别:全球与进口
Promise是一个标准的内置对象,您可以直接使用它。在此处检查浏览器支持。
const myPromise=新Promise((解析,拒绝)=>{setTimeout(()=>{解决(“无需安装即可”);}, 300);});我的承诺.then(值=>{console.log(值)}).catch(错误=>{console.log(错误)});
JavaScript的可观察、反应式扩展需要RxJS安装和导入才能使用
import { Observable } from 'rxjs';
其他回答
我相信所有其他的答案都会消除你的疑虑。然而,我只是想补充一点,可观测性是基于函数式编程的,我发现它附带的函数非常有用,比如map、flatmap、reduce、zip。web实现的一致性,尤其是当它依赖于API请求时,是一种残酷的改进。
我强烈推荐这个文档,因为它是reactiveX的官方文档,我发现它是最清晰的。
如果你想了解可观测性,我建议你写一篇三部分的文章:http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1/
虽然它是针对RxJava的,但概念是相同的,而且解释得很好。在reactiveX文档中,您拥有每个函数的等效项。您必须查找RxJS。
承诺是渴望的,而可观察者是懒惰的。Promise总是异步的,而Observable可以是同步或异步。Promise可以提供单个值,而Observable是值流(从0到多个值)。您可以将RxJS运算符应用于Observable,以获得新的定制流动
还有一个区别:全球与进口
Promise是一个标准的内置对象,您可以直接使用它。在此处检查浏览器支持。
const myPromise=新Promise((解析,拒绝)=>{setTimeout(()=>{解决(“无需安装即可”);}, 300);});我的承诺.then(值=>{console.log(值)}).catch(错误=>{console.log(错误)});
JavaScript的可观察、反应式扩展需要RxJS安装和导入才能使用
import { Observable } from 'rxjs';
虽然Günter Zöchbauer的回答总体上是好的,但我不认为它强调了在处理角度分量时,您几乎总是希望使用Observable,因为它支持取消。承诺不能取消,即使您的组件被破坏,承诺也会得到解决。Angular倾向于宽容,直到不宽容为止。
例如,对损坏组件的任何手动更改检测都会导致异常:
ngOnInit() {
// Promise API
this.service.getData().then(d => {
this.data = d;
this.changeDetectorRef.detectChanges();
});
// Observable API
this.service.getData().pipe(takeUntil(this.unsubscribe)).subscribe((d) => {
this.data = d;
this.changeDetectorRef.detectChanges();
});
}
如果您的组件在promise解析之前被销毁,那么在promise被解析时,您将尝试使用已销毁的视图错误。
或者,如果您在takeUntil模式中使用可观测值,那么一旦您的组件被破坏,订阅就会被取消。
这是一个有点做作的例子,但为被破坏的组件执行代码可能会导致错误。
概述:
Promise和Observables都帮助我们处理异步操作。当这些异步操作完成时,它们可以调用某些回调。Promise只能处理一个事件,Observables用于一段时间内的事件流承诺一旦待定,就不能取消可以使用运算符转换可观测数据发射
您可以始终使用可观察对象来处理异步行为,因为可观察对象具有承诺提供的所有功能(+额外功能)。然而,有时不需要Observables提供的额外功能。然后,导入一个库以供其使用将是额外的开销。
何时使用Promise:
当您有一个要处理结果的异步操作时,请使用promise。例如:
var promise = new Promise((resolve, reject) => {
// do something once, possibly async
// code inside the Promise constructor callback is getting executed synchronously
if (/* everything turned out fine */) {
resolve("Stuff worked!");
}
else {
reject(Error("It broke"));
}
});
//after the promise is resolved or rejected we can call .then or .catch method on it
promise.then((val) => console.log(val)) // logs the resolve argument
.catch((val) => console.log(val)); // logs the reject argument
因此,promise执行一些代码,它要么解析,要么拒绝。如果称为resolve或reject,则promise将从挂起状态变为resolved或reject状态。当promise状态被解析时,将调用then()方法。当promise状态被拒绝时,将调用catch()方法。
何时使用Observables:
当一段时间内存在需要处理的数据流时,使用Observables。流是一系列随时间而可用的数据元素。流的示例有:
用户事件,例如单击或键控事件。用户随时间生成事件(数据)。Websockets,在客户端与服务器建立WebSocket连接后,它会随时间推移推送数据。
在Observable中,指定了下一个事件发生的时间、错误发生的时间或Observable完成的时间。然后,我们可以订阅这个可观察的,它激活了它,在这个订阅中,我们可以传递3个回调(不必总是传递所有回调)。成功时执行一次回调,错误时回调,完成时回调。例如:
const observable = Rx.Observable.create(observer => {
// create a single value and complete
observer.onNext(1);
observer.onCompleted();
});
source.subscribe(
x => console.log('onNext: %s', x), // success callback
e => console.log('onError: %s', e), // error callback
() => console.log('onCompleted') // completion callback
);
// first we log: onNext: 1
// then we log: onCompleted
当创建一个可观察对象时,它需要一个回调函数,该函数提供一个观察者作为参数。在这个观察者上,您可以调用onNext、onCompleted和onError。然后,当Observable被订阅时,它将调用传入订阅的相应回调。