在Angular中Promise和Observable之间有什么区别?
每一个例子都有助于理解这两种情况。在什么情况下,我们可以使用每种情况?
在Angular中Promise和Observable之间有什么区别?
每一个例子都有助于理解这两种情况。在什么情况下,我们可以使用每种情况?
当前回答
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等)来转换可观察数据。
我刚刚处理了一个问题,Promise是最好的解决方案,我将在这里分享给任何在有用的情况下遇到这个问题的人(这正是我之前寻找的答案):
在Angular2项目中,我有一个服务,它接受一些参数并返回一个值列表来填充表单上的下拉菜单。当表单组件初始化时,我需要使用不同的参数多次调用同一个服务来定义多个不同的下拉菜单,但是如果我只是将所有变量排队来调用该服务,只有最后一个成功,其余的错误都出来了。从数据库提取的服务一次只能处理一个请求。
成功填充所有下拉菜单变量的唯一方法是调用服务,以防止在最后一个请求完成之前处理新请求,Promise/.then机制很好地解决了这个问题。
fetchValueList(listCode): Promise<any> {
return this.dataSvc.getValueList(listCode, this.stateSvc.currentContext, this.stateSvc.currentLanguageCode)
.map(response => response.json())
.toPromise();
}
initializeDropDowns() {
this.fetchValueList('First-Val-List')
.then(data => {
this.firstValList = data;
return this.fetchValueList('Second-Val-List')
}).then(data => {
this.secondValList = data;
return this.fetchValueList('Third-Val-List')
}).then(data => {
this.thirdValList = data;
}) }
我在组件中定义了函数,然后在ngOnInit中调用initializeDropDowns()。
fetchValueList函数返回Promise,因此第一个调用传递第一个listCode,当Promise解析时,返回值位于.then块中的数据变量中,我们可以将其分配给this.firstValList变量。当函数返回数据时,我们知道服务已经完成,可以使用第二个listCode再次调用,返回值在next.then块中的数据变量中,我们将其分配给this.secondValList变量。
我们可以根据需要将其链接多次,以填充所有变量,在最后一个代码块上,我们只需省略return语句,块就终止了。
这是一个非常具体的用例,其中我们有一个单独的服务,需要在组件初始化时多次调用,并且服务必须完成其获取并返回一个值,然后才能再次调用,但在这种情况下,Promise/.then方法是理想的。
许诺
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附带的操作员列表
惰性执行允许在通过订阅执行可观察到的操作之前建立一个运算符链,以进行更具声明性的编程。
Promise总是异步的,而Observable可以是同步的或异步的。当数据发生变化时,观察者会多次返回数据。Promise只产生一种价值。可观测值是一段时间内多个值的惰性集合。这是一种非常好的异步操作方法。承诺不是懒惰的。可以使用unsubscribe()取消可观测值。承诺不能取消。
承诺:
异步事件处理程序-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等。