在Angular中Promise和Observable之间有什么区别?
每一个例子都有助于理解这两种情况。在什么情况下,我们可以使用每种情况?
在Angular中Promise和Observable之间有什么区别?
每一个例子都有助于理解这两种情况。在什么情况下,我们可以使用每种情况?
当前回答
关于这个话题已经有很多答案了,所以我不会再赘述。
但是对于刚开始学习Observable/Aangular并想知道与Promise相比使用哪一个的人来说,我建议您将所有内容都保持Observable,并将项目中所有现有的Promise转换为Observable。
因为Angular框架本身及其社区都在使用Observable。因此,当您集成框架服务或第三方模块并将所有内容链接在一起时,这将是有益的。
当然,没有任何意见在所有情况下都是100%正确的,但至少我认为98%的时间是在Angular框架中实现的常规商业项目,Observable是正确的选择。
即使你在开始你的简单爱好项目时不喜欢它,你很快就会意识到你在Angular中与之交互的几乎所有组件,而且大多数Angular友好的第三方框架都使用Observables,然后你会不断地将Promise转换为Observable,以便与它们进行通信。
这些组件包括但不限于:HttpClient、表单生成器、Angular材质模块/对话框、Ngrx存储/效果和ngx引导。
事实上,我在过去两年中处理的Angular生态系统中唯一的Promise是APP_INITIALIZER。
其他回答
许诺
Promise在异步操作完成或失败时处理单个事件。
注意:有Promise库支持取消,但ES6 Promise目前还没有。
可观察的
Observable就像一个流(在许多语言中),允许传递零个或多个事件,并为每个事件调用回调。
与Promise相比,Observable通常更受欢迎,因为它提供了Promise等特性。使用Observable,无论您想处理0、1或多个事件。您可以在每种情况下使用相同的API。
Observable也比Promise具有可取消的优势。如果不再需要对服务器的HTTP请求或其他昂贵的异步操作的结果,则Observable的Subscription允许取消订阅,而Promise最终将调用成功或失败回调,即使您不再需要通知或它提供的结果。
当Promise立即启动时,Observable只有在您订阅它时才会启动。这就是为什么Observable被称为lazy。
Observable提供了map、forEach、reduce等运算符。。。类似于阵列
还有一些强大的运算符,如retry()或replay()。。。这通常很方便。rxjs附带的操作员列表
惰性执行允许在通过订阅执行可观察到的操作之前建立一个运算符链,以进行更具声明性的编程。
我相信所有其他的答案都会消除你的疑虑。然而,我只是想补充一点,可观测性是基于函数式编程的,我发现它附带的函数非常有用,比如map、flatmap、reduce、zip。web实现的一致性,尤其是当它依赖于API请求时,是一种残酷的改进。
我强烈推荐这个文档,因为它是reactiveX的官方文档,我发现它是最清晰的。
如果你想了解可观测性,我建议你写一篇三部分的文章:http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1/
虽然它是针对RxJava的,但概念是相同的,而且解释得很好。在reactiveX文档中,您拥有每个函数的等效项。您必须查找RxJS。
Promise和Observables都为我们提供了抽象,帮助我们处理应用程序的异步性质。Günter和@Relu清楚地指出了它们之间的区别。
由于一段代码相当于一千个单词,所以让我们通过下面的示例来更容易地理解它们。
感谢@Christoph Burgdorf的精彩文章
Angular使用Rx.js Observables而不是承诺来处理HTTP。
假设您正在构建一个搜索函数,该函数应在您键入时立即显示结果。这听起来很熟悉,但这项任务带来了很多挑战。
我们不希望每次用户按下键时都会触及服务器端点。它应该会向他们发出大量HTTP请求。基本上,我们只想在用户停止打字后点击它,而不是每次按键。对于后续请求,不要使用相同的查询参数到达搜索端点。处理无序响应。当我们同时处理多个请求时,我们必须考虑这些请求以意外顺序返回的情况。想象一下,我们首先键入计算机,停止,一个请求发出,我们键入汽车,停止,请求发出。现在我们有两个请求正在执行中。不幸的是,携带计算机结果的请求在携带汽车结果的请求之后返回。
演示将仅由两个文件组成:app.ts和wikipedia-service.ts。然而,在现实世界场景中,我们很可能将事情进一步拆分。
下面是一个基于Promise的实现,它不处理任何描述的边缘情况。
维基百科服务.ts
import { Injectable } from '@angular/core';
import { URLSearchParams, Jsonp } from '@angular/http';
@Injectable()
export class WikipediaService {
constructor(private jsonp: Jsonp) {}
search (term: string) {
var search = new URLSearchParams()
search.set('action', 'opensearch');
search.set('search', term);
search.set('format', 'json');
return this.jsonp
.get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })
.toPromise()
.then((response) => response.json()[1]);
}
}
我们正在注入Jsonp服务,以针对给定搜索词的Wikipedia API发出GET请求。注意,我们调用toPromise是为了从一个可观察的<Response>转换为Promise<Response>。最终以Promise<Array<string>作为搜索方法的返回类型。
应用程序
// check the plnkr for the full list of imports
import {...} from '...';
@Component({
selector: 'my-app',
template: `
<div>
<h2>Wikipedia Search</h2>
<input #term type="text" (keyup)="search(term.value)">
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>
</div>
`
})
export class AppComponent {
items: Array<string>;
constructor(private wikipediaService: WikipediaService) {}
search(term) {
this.wikipediaService.search(term)
.then(items => this.items = items);
}
}
这里也没有太多惊喜。我们注入我们的WikipediaService,并通过搜索方法向模板公开其功能。该模板简单地绑定到keyup并调用search(term.value)。
我们打开WikipediaService的搜索方法返回的Promise的结果,并将其作为一个简单的字符串数组公开给模板,这样我们就可以让*ngFor循环通过它,并为我们建立一个列表。
参见Plunker上基于Promise的实现示例
观察者真正闪耀的地方
让我们将代码更改为不在每次击键时敲击端点,而是仅在用户停止键入400ms时发送请求
要揭示这些超级功能,我们首先需要获得一个Observable<string>,它包含用户键入的搜索项。我们可以利用Angular的formControl指令,而不是手动绑定到keyup事件。要使用此指令,我们首先需要将ReactiveFormsModule导入到应用程序模块中。
应用程序
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JsonpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [BrowserModule, JsonpModule, ReactiveFormsModule]
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
导入后,我们可以在模板中使用formControl,并将其设置为名称“term”。
<input type="text" [formControl]="term"/>
在我们的组件中,我们从@angular/form创建一个FormControl实例,并将其作为组件名称项下的字段公开。
在幕后,术语会自动将Observable<string>公开为我们可以订阅的属性valueChanges。现在我们有了Observable<string>,克服用户输入就像在Observable上调用debounceTime(400)一样简单。这将返回一个新的Observable<string>,它只会在400ms内没有新值时发出一个新值。
export class App {
items: Array<string>;
term = new FormControl();
constructor(private wikipediaService: WikipediaService) {
this.term.valueChanges
.debounceTime(400) // wait for 400 ms pause in events
.distinctUntilChanged() // ignore if next search term is same as previous
.subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));
}
}
如果我们的应用程序已经显示了搜索结果,那么再次发出搜索项请求将是浪费资源。为了实现所需的行为,我们所要做的就是在调用debounceTime(400)之后立即调用distinctUntilChanged运算符
参见Plunker上的Observable实现示例
关于处理无序响应,请查看全文http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html
就我在Angular中使用HTTP而言,我同意在正常的用例中,使用Observable over Promise没有太大的区别。在实践中,没有一个优点是真正相关的。我希望将来能看到一些高级用例:)
了解更多信息https://angular-2-training-book.rangle.io/handout/observables/https://angular.io/tutorial/toh-pt6#observables
Promise和Observables都只处理异步调用。
以下是它们之间的区别:
可观察的
在一段时间内发出多个值在我们订阅Observable之前不会调用可以使用unsubscribe()方法取消提供映射、forEach、filter、reduce、retry和retryWhen运算符
许诺
一次仅发射一个值调用不带.then和.catch的服务无法取消不提供任何操作员
承诺与可观察到的相似性
两者都用于处理异步代码。请查看承诺示例。promise构造函数传递一个解析引用函数,当它在完成某个异步任务时被某个值调用时,该函数将被调用。const promise=new promise(解析=>{setTimeout(()=>{决心(“来自承诺的问候!”);}, 2000);});promise.then(值=>console.log(值));现在是一个可观的例子。在这里,我们还将一个函数传递给observable——一个处理异步任务的观察者。与promise中的resolve不同,它具有以下方法并订阅以代替then。所以两者都处理异步任务。现在让我们看看区别。const observable=新的observable(观察者=>{setTimeout(()=>{observer。next(“来自Observable的您好!”);}, 2000);});observable.subscribe(value=>console.log(value));
承诺与显著差异
许诺
它解析或拒绝单个值,并且可以一次处理单个值的异步任务。一个promise一旦解析了它完成的异步值,就不能再使用了。它只是一次性使用,在这里它是不够的。不可取消操作员不支持rxjs。
可观察的
能够发出多个异步值。用于处理事件或值流。假设您有一个包含大量任务或值的数组,并且您希望每次将值插入其中时都能自动处理。每当您将一个值推送到这个数组中时,它的所有订阅者都会自动收到最新的值。Observable可用于观察输入更改、重复间隔、向所有子组件广播值、web套接字推送通知等。可以随时使用退订方法取消。承诺的最后一个好部分是支持rxjs运算符。在订阅之前,您有许多管道操作符(主要是map、filter、switchMap、combineLatest等)来转换可观察数据。