在Angular中Promise和Observable之间有什么区别?

每一个例子都有助于理解这两种情况。在什么情况下,我们可以使用每种情况?


当前回答

Promise和Observable都在Angular(typescript)中用于处理异步数据,但它们的用法和行为不同。

承诺:是一次性事件(解决/拒绝)返回单个值(解析或拒绝一次)处理单个异步事件无取消和无插座

用例示例:错误处理和恢复/处理顺序操作/组件间通信

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

fetchData() {
  return new Promise((resolve, reject) => {
    this.http.get('https://api.examplepromise.com/data')
     .toPromise()
     .then(data => resolve(data))
     .catch(error => reject(error));
 });
}

观察结果:一段时间内可以发出多个值的值流只要流处于活动状态,就可以订阅并发出值。处理多个异步事件可以取消并支持socket/mapreducer(ngrx)操作用例示例:监控输入元素的变化/动画和转换/使用RxJS进行集中状态管理/取消用户输入以限制API调用

块引用

import { fromEvent } from 'rxjs';

constructor(private elementRef: ElementRef) {}

  listenToButtonClicks() {
  fromEvent(this.elementRef.nativeElement, 'click')
  .subscribe(event => console.log(event));
 }

其他回答

答案中缺少可观察到的一个缺点。Promise允许使用ES7异步/等待函数。使用它们,您可以像编写同步函数调用一样编写异步代码,因此不再需要回调。Observables做到这一点的唯一可能性是将它们转换为Promise。但当您将它们转换为Promise时,只能再次有一个返回值:

async function getData(){
    const data = await observable.first().toPromise();
    //do stuff with 'data' (no callback function needed)
}

进一步阅读:如何“等待”Rx Observable?

承诺-提供单一的未来价值。不懒惰。无法取消。它要么拒绝,要么解决。

可观察-提供多个未来值。懒惰的可取消。它提供了其他方法,如map、filter和reduce。

Promise和Observables都帮助我们处理异步操作。当这些异步操作完成。Angular使用RxJS中的Observables而不是承诺来处理HTTP

以下是承诺和可观察性的一些重要区别。

我看到很多人认为Observable是“可取消的”,但将Promise设为“可取消”并不重要

函数cancelablePromise(主体){让决心,拒绝;const promise=新的promise((res,rej)=>{分辨率=res;拒绝=rej;正文(解析,拒绝)})promise.resolve=决议;promise.reject=拒绝;退货承诺}//示例1:过早拒绝承诺const p1=可取消承诺((resolve,reject)=>{setTimeout(()=>解析(“10”,100))})p1.then(value=>alert(value)).catch(err=>console.error(err))p1.拒绝(新错误('denid'))//控制台中出现错误//示例:过早地解决承诺const p2=可取消承诺((resolve,reject)=>{setTimeout(()=>解析('blop'),100)})p2.then(value=>alert(value)).catch(err=>console.error(err))p2.resolve(200)//预期警报为200

承诺:

异步事件处理程序-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等。