![](/img/trans.png)
[英]How to wait for a observable method to finish before proceeding in Angular 2
[英]Angular2 Observable - Await multiple function calls before proceeding
我试图通过迁移当前用 Angular1/AngularJS 编写的应用程序来提高我对 Angular2 的了解。
特别是一个功能让我难倒。 我正在尝试复制一个功能,其中调用函数等待继续,直到它调用的函数完成一个承诺循环。 在 AngularJS 中,我调用的函数基本上是这样的:
this.processStuff = function( inputarray, parentnodeid ) {
var promises = [];
var _self = this;
angular.forEach( inputarray , function( nodeid ) {
switch ( parentnodeid )
{
case ‘AAA’ : var component = _self.doMoreStuff( nodeid, parentnodeid ); break;
case ‘BBB’ : var component = _self.doMoreStuff( nodeid, parentnodeid ); break;
case ‘CCC’ : var component = _self.doMoreStuff( nodeid, parentnodeid ); break;
default : var component = null;
}
promises.push( component );
});
return $q.all(promises);
};
它包含一个forEach
循环,该循环调用另一个函数( doMoreStuff
),该函数也返回一个承诺,并将所有这些返回的承诺存储在一个数组中。
使用 AngularJS,当我在另一个函数中调用processStuff
时,我可以指望系统等待processStuff
完成,然后再进入 then 块中的代码:
service.processStuff( arraying, parentidarg )
.then(function( data ) {
...
processStuff
的调用者等待所有doMoreStuff
调用完成,直到processStuff
的调用者进入其then
块。
我不确定如何使用 Angular2 和 Observables 来实现这一点。 我可以从这些帖子中看到,为了模仿承诺,Observables 基本上只是使用subscribe()
而不是then()
:
Angular 1.x $q 到 Angular 2.0 测试版
但是如何在我的应用程序继续之前等待forEach
循环中的所有调用完成?
我一直在用 forkJoin 做这个
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
Observable.forkJoin(
this.http.get('./friends.json').map((res: Response) => res.json()),
this.http.get('./customer.json').map((res: Response) => res.json())
)
.subscribe(res => this.combined = {friends: res[0].friends, customer: res[1]});
这里有更多信息: http : //www.syntaxsuccess.com/viewarticle/angular-2.0-and-http
在 RxJS v6 及更高版本中,您可以使用zip更雄辩地做到这一点。
import { zip } from 'rxjs';
const promise1 = yourSvc.get(yourFavoriteAPI.endpoint1);
const promise2 = yourSvc.get(yourFavoriteAPI.endpoint2);
const promises = zip(promise1, promise2);
promises.subscribe(([data1, data2]) => {
console.log(data1);
console.log(data2);
});
虽然结果是一样的,但我发现zip
比forkJoin
更可取,因为zip
更通用并且可以处理来自 observable 的新值。
来自rxjs 文档的详细信息:
zip操作符将订阅所有内部 observable,等待每个都发出一个值。 一旦发生这种情况,将发出具有相应索引的所有值。 这将一直持续到至少一个内部 observable 完成。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.