在Angular中Promise和Observable之间有什么区别?
每一个例子都有助于理解这两种情况。在什么情况下,我们可以使用每种情况?
在Angular中Promise和Observable之间有什么区别?
每一个例子都有助于理解这两种情况。在什么情况下,我们可以使用每种情况?
当前回答
承诺-提供单一的未来价值。不懒惰。无法取消。它要么拒绝,要么解决。
可观察-提供多个未来值。懒惰的可取消。它提供了其他方法,如map、filter和reduce。
其他回答
还有一个区别:全球与进口
Promise是一个标准的内置对象,您可以直接使用它。在此处检查浏览器支持。
const myPromise=新Promise((解析,拒绝)=>{setTimeout(()=>{解决(“无需安装即可”);}, 300);});我的承诺.then(值=>{console.log(值)}).catch(错误=>{console.log(错误)});
JavaScript的可观察、反应式扩展需要RxJS安装和导入才能使用
import { Observable } from 'rxjs';
承诺只针对单一价值或解决方案。可观测数据是数据流。可观的东西可以取消,但承诺不能取消。
至少对我来说,最鲜为人知的是:
承诺总是异步的,但可观测可以是同步的和异步的。
如果你想详细了解它,我写了一篇关于这个答案的博客文章——JavaScript中Observables和Promise之间的4个区别
承诺:
异步事件处理程序-Promise对象表示异步操作的最终完成(或失败)及其结果值。
语法:new Promise(executor);
例如:
var promise_eg = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo');
}, 300);
});
promise_eg.then(function(value) {
console.log(value);
// expected output: "foo"
});
console.log(promise_eg);
关于Promise:
它有一个管道,因此在调用时只返回一次值。它是一个单向处理程序,因此一旦调用,您可能无法取消。可以在when()和then()之间使用有用的语法。
观察结果:
可观测值是一段时间内多个值的惰性集合。这是一种非常好的异步操作方法。它可以用具有跨平台支持的rxjs实现,也可以与Angular/React等一起使用。
它的作用类似于流衬垫,可以是多管道。因此,一旦定义,您可以在许多地方订阅以获得返回结果。
语法:从“@reactivex/rxjs”导入*作为Rx;初始化:
Rx.Observable.fromEvent(button, "click"),
Rx.Subject()
etc.
订阅:RxLogger.getInstance();
例如:
import { range } from 'rxjs';
import { map, filter } from 'rxjs/operators';
range(1, 200).pipe(
filter(x => x % 2 === 1),
map(x => x + x)
).subscribe(x => console.log(x));
由于它支持多管道,您可以在不同的位置订阅结果,
它有比承诺更多的可能性。
用法:
它有更多的可能性,如贴图、过滤器、管道、贴图、concatMap等。
承诺
定义:帮助您异步运行函数,并使用它们的返回值(或异常),但仅在执行时使用一次。不懒惰不可取消(有Promise库支持取消,但ES6 Promise目前还没有)。两个可能的决定是拒绝决定无法重试(promise应该可以访问返回promise的原始函数,该函数具有重试功能,这是一种错误的做法)
可观察到的
定义:帮助您异步运行函数,并在执行时以连续顺序(多次)使用它们的返回值。默认情况下,它是懒惰的,因为随着时间的推移,它会发出值。有很多运算符,简化了编码工作。一个运算符重试可以用于在需要时重试,如果我们需要根据某些条件重试可观察值,也可以使用retryWhen。
注:**RxMarbles.com上提供了操作员列表及其交互式图表**
虽然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模式中使用可观测值,那么一旦您的组件被破坏,订阅就会被取消。
这是一个有点做作的例子,但为被破坏的组件执行代码可能会导致错误。