[英]Angular2 - How to chain async service calls (http requests) in a component?
I have a component which first need to call a service that POST something. 我有一个组件,该组件首先需要调用发布某些内容的服务。 Then in the same component I want to wait until the POST is done, to call another service which GETs data. 然后在同一个组件中,我想等到POST完成后,再调用另一个获取数据的服务。
How can I make the GET call wait for the POST call to finish? 如何使GET呼叫等待POST呼叫结束?
In new-version.component.ts: 在new-version.component.ts中:
private createNewVersion(value) {
...
// create new version, then call on all available versions
// POST call
this._newVersionService.createNewVersion(vnr);
// GET call
this._versionService.getAvailableVersions();
...
}
In new-version.service.ts: 在new-version.service.ts中:
export class NewVersionService {
response$: Subject<any>;
constructor(private _http: Http) {
this.response$ = new BehaviorSubject<any>(null);
}
public createNewVersion(versionNr) {
this._http.post('http://localhost:8080/services/' + versionNr, null, {
method: 'POST',
})
.subscribe(response => {
this.response$.next(response.status);
},
error => console.error(error));
}
Thanks! 谢谢!
When a call returns a Promise
chain the calls with 当呼叫返回Promise
链时,
someFunction() {
return returnsPromise()
.then(result => doSomethingNext())
.then(result => doSomethingAfterThat());
}
Ensure you have a return
that returns the Promise
of that chain so the caller of someFunc()
also has a chance to time additional work to execute after doSomethingAfterThat()
is completed. 确保您有一个return
返回该链的Promise
的返回值,以便someFunc()
的调用者还有机会安排在doSomethingAfterThat()
完成之后要执行的其他工作。
When a call returns an Observable
then use the complete
callback 当调用返回一个Observable
使用complete
回调
someFunction() {
return returnsObservable()
.subscribe(
event => doForEachEvent(),
error => handleError(),
() => doSomethingNext()
.then(result => doSomethingAfterThat());
}
doSomethingNext()
is executed after the last event
and doSomethingAfterThat()
is again chained with then()
to show how to mix observable and promise. doSomethingNext()
在最后一个event
之后执行, doSomethingAfterThat()
再次与then()
链接在一起,以显示如何将可观察的和promise混合使用。 doSomething()
. doSomething()
。
You should be able to concat
to achieve sequence, and reduce
to collect the emitted values: 你应该能够concat
实现顺序,并reduce
收集发射值:
var a = this._newVersionService.createNewVersion(vnr);
var b = this._versionService.getAvailableVersions();
Rx.Observable.concat(a, b).reduce((acc:Array<any>, x:any) => {
acc.push(x); return acc;
}, []).subscribe(t=> {
var firstEmitted = t[0];
var secondEmitted = t[1];
});
You can do like this: Change createNewVersion to: 您可以这样做:将createNewVersion更改为:
public createNewVersion(versionNr) {
return this._http.post('http://localhost:8080/nod_inspection_plugin/services/' + versionNr, null, {
method: 'POST',
});
}
Then in your call: 然后在您的通话中:
this._newVersionService.createNewVersion(vnr).subscribe(response=> {
this._versionService.getAvailableVersions();
}, error => console.error(error));
Another way to do the same is to subscribe
in the new-version.component.ts
and call you GET
request from within the POST
request ie check whether your POST
request is done Correctly or not if yes POST
is done Properly then call you GET
request. 另一种方法是subscribe
new-version.component.ts
并从POST
请求中调用GET
请求,即检查您的POST
请求是否正确完成(如果是), POST
是否正确完成,然后调用GET
请求。 As below: 如下:
In new-version.component.ts: 在new-version.component.ts中:
private createNewVersion(value) {
...
// create new version, then call on all available versions
// POST call
this._newVersionService.createNewVersion(vnr)
.subscribe((res) => {
if(res){
console.log(res);
if (---Post request done properly check via status or something else here----{
CALL YOUR GET REQUEST HERE.....
// GET call
this._versionService.getAvailableVersions();
}
else {
DO something else whatever you want....
}
}
});
...
}
In new-version.service.ts: 在new-version.service.ts中:
export class NewVersionService {
response$: Subject<any>;
constructor(private _http: Http) {
this.response$ = new BehaviorSubject<any>(null);
}
public createNewVersion(versionNr) {
this._http.post('http://localhost:8080/nod_inspection_plugin/services/' + versionNr, null, {
method: 'POST',
})
.map(response => {
return [{status: response.status, json: response.json()}];
},
error => console.error(error));
}
for more info related to http
request you can read here . 有关http
请求的更多信息,您可以在这里阅读 。
Better use switchMap()
here. 最好在这里使用switchMap()
。
const versions$ = this._newVersionService.createNewVersion(vnr)
.switchMap(response => this._versionService.getAvailableVersions());
versions$.subscribe(response2 => this.versions = response2)
But the problem will be if you make another POST request before first has been resolved, the previous request will get cancelled. 但是问题是如果您在第一个POST请求解决之前又提出了另一个POST请求,则先前的请求将被取消。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.