我试图通过迁移当前用Angular1编写的应用程序来提高我对Angular2的了解
特别令我难过的一个特点.我试图复制一个功能,其中一个调用函数等待继续,直到它调用的函数完成了一个promises循环.在有角度的一个中,我调用的函数看起来基本上是这样的:
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);
};
Run Code Online (Sandbox Code Playgroud)
它包含一个forEach循环,它调用另一个函数(doMoreStuff),该函数也返回一个promise,它将所有返回的promises存储在一个数组中.
使用Angular1,当我在另一个函数中调用processStuff时,我可以指望系统等到processStuff完成后再进入then块中的代码.IE:
service.processStuff( arraying, …Run Code Online (Sandbox Code Playgroud) 我正在Angular 2中编写一个应用程序,我想执行几个http请求并在响应上运行一个函数.
在Angular 1中,我会写类似的东西 $q.all([$http.get(...), $http.get(...), ...]).then(doSomethingWithResponses);
但Angular 2返回RxJS Observables,经过一堆阅读后,我仍然无法弄清楚如何得到几个http请求的响应.怎么能这样呢?
我在教程中找到了这个示例代码:
getRandomQuote() {
this.http.get('http://localhost:3001/api/random-quote')
.map(res => res.text())
.subscribe(
data => this.randomQuote = data,
err => this.logError(err),
() => console.log('Random Quote Complete')
);
}
Run Code Online (Sandbox Code Playgroud)
但是当试图使用它时,我只得到TypeError: this.http.get(...).map is not a function in [null]:
getChannels():Promise<Channel> {
return this.http.get('...')
.map(function (response:Response) {
...
}).toPromise();
}
Run Code Online (Sandbox Code Playgroud)
我的Typescript编译器告诉我这些方法是可用的,但是当检查http.get()它们的返回值时,它们就丢失了.
我使用了当前angualar2入门指南的package.json:
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
Run Code Online (Sandbox Code Playgroud)
...
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
Run Code Online (Sandbox Code Playgroud)
在这一点上我有什么想法可能会出错?
我试图用Observables替换我的函数返回的所有promise.从这篇文章中,我了解到我不应再使用"new Observable" Observable.forkJoin和数组参数
什么是RxJS v5语法来实现这样才能实现异步等待?
thirdFunction() {
let _self = this;
return new Observable(function(observer) {
...
observer.next( responseargs );
observer.complete();
});
}
Run Code Online (Sandbox Code Playgroud)
非常感谢您提供的帮助.
这就是我现在的工作方式:
getTwoObjectById(url1: string, id1: string, url2: string, id2): any{
return Observable.forkJoin(
this.http.get(url1 + `/${id1}`, this.jsonWebToken()).map(res =>
res.json()),
this.http.get(url2 + `/${id2}`, this.jsonWebToken()).map(res =>
res.json())
);
}
Run Code Online (Sandbox Code Playgroud)
我想用 id1, url1, id2, url2, id3, url3 ...
我正在尝试编写一个函数,该函数应将 ID 数组和 URL 数组作为参数。使用Observable.forkJoinfor 循环应该执行每个请求 getById 到 Array 中的 Backend-URL。我的问题是 for 循环
getObjectsById(ids: Array<string>, urls: Array<string>): Observable<any>{
return Observable.forkJoin(
for(let i = 0; i++; i<ids.length) {
this.http.get(urls[i] + `/${ids[i]}`, this.jsonWebToken()).map(res => res.json());
}
)
}
Run Code Online (Sandbox Code Playgroud)
我怎样才能做到这一点?