Angular 8 在 if 语句中等待 http 结果

Question

我有一个组件，其中包含一个发出多个http GET请求的方法。如果第一个请求不返回任何内容，我执行下一个请求，然后执行下一个请求，直到其中一个请求返回结果。

我的问题是，在第一个请求完成之前，下一个请求开始，而我希望它逐个执行每个请求。

我的组件代码示例：

input1: Object;
input2: Object;
httpResults: Object;
MainMethod() {
this.firstGetHttp(this.input1.value, this.input2.value);
// wait
if(this.httpResults == []) {
this.secondGetHttp(this.input1.value, this.input2.value);
// wait
}
else if(this.httpResults == []) {
this.thirdGetHttp(this.input1.value, this.input2.value);
// wait
}
// -- more requests following the same pattern --
else {
return;
}
}
firstGetHttp(input1: Object, input2: Object) {     
this.httpService.firstGetData(input1, input2).subscribe(data =>{
this.httpResults = data;
});
}
secondGetHttp(input1: Object, input2: Object) {     
this.httpService.secondGetData(input1, input2).subscribe(data =>{
this.httpResults = data;
});
}
thirdGetHttp(input1: Object, input2: Object) {     
this.httpService.thirdGetData(input1, input2).subscribe(data =>{
this.httpResults = data;
});
}

所有的http请求都很小而且很快，所以等待时间不是问题。我如何实现我的代码，以便我可以等待每个单独的请求完成并检查它是否返回了某些内容？

Answer 1

在我看来，最好使用Promise来做到这一点。

首先，按如下方式修改您的服务： 使用Promise而不是Observable

@Injectable()
export class HttpService {
firstGetData(input,input):Promise<any>{
return this.http.(...).toPromise();
}
secondGetData(input,input):Promise<any>{
return this.http.(...).toPromise();
}
thirdGetData(input,input):Promise<any>{
return this.http.(...).toPromise();
}
}

然后在组件中：

MainMethod() {
this.httpService.firstGetData(this.input1.value, this.input2.value)
.then(data =>{
this.httpResults = data;
if(!(this.httpResults == [])){
throw 'stop-operation'; // stop , because we have data;
}
// continue , because we do not have any data in httpResult 
})
.then(response=>{
return this.httpService.secondGetHttp(this.input1.value, this.input2.value);
})
.then(data=>{
this.httpResults = data;
if(!(this.httpResults == [])){
throw 'stop-operation'; // stop , because we have data;
}
// continue , because we do not have any data in httpResult
})
.then(response=>{
return this.httpService.thirdGetHttp(this.input1.value, this.input2.value);
})
.then(data=>{
this.httpResults = data;
if(!(this.httpResults == [])){
throw 'stop-operation'; // stop , because we have data;
}
// continue , because we do not have any data in httpResult
})
.catch(error=>{
if(error!=='stop-operation'){
// this error happend in http request;
}
});
}

Answer 2

嗨，试试这个，你需要在完整的部分调用。

firstGetHttp(input1: Object, input2: Object) {     
this.httpService.firstGetData(input1, input2).subscribe(data =>{
this.httpResults = data;
}, err =>{
}, ()=>{ // When First Request Complete Call Second Request.
this.secondGetHttp(this.input1.value, this.input2.value);
});
}

secondGetHttp(input1: Object, input2: Object) {     
this.httpService.secondGetData(input1, input2).subscribe(data =>{
this.httpResults = data;
}, err => {
}, ()=>{ // When First Request Complete call third request
this.thirdGetHttp(this.input1.value, this.input2.value);
});
}

Answer 3

您可以在处理当前方法时调用下一个方法。你会得到这样的东西：

input1: Object;
input2: Object;
httpResults: Object;
MainMethod() {
this.firstGetHttp(this.input1.value, this.input2.value);
}
firstGetHttp(input1: Object, input2: Object) {     
this.httpService.firstGetData(input1, input2).subscribe(data =>{
if(this.httpResults == []) {
this.secondGetHttp(this.input1.value, this.input2.value);
} else {
this.httpResults = data;  
}
});
}
secondGetHttp(input1: Object, input2: Object) {     
this.httpService.secondGetData(input1, input2).subscribe(data =>{
if(this.httpResults == []) {
this.thirdGetHttp(this.input1.value, this.input2.value);
} else {
this.httpResults = data;  
}
});
}
thirdGetHttp(input1: Object, input2: Object) {     
this.httpService.thirdGetData(input1, input2).subscribe(data =>{
this.httpResults = data;
});
}

由于我对 Angular 中的线程不是很熟悉，因此我不确定一旦执行 if 语句，httpResults是否会分配给GET请求的结果集。如果没有，您将不得不等待请求线程完成执行，例如使用await.

Answer 4

concat(链请求)、filter(过滤掉空响应)和take(第一个非空结果就可以)的组合应该可以做你想要的：

// alter second and thirdGetHttp the same way
firstGetHttp(input1: Object, input2: Object) {     
return this.httpService.firstGetData(input1, input2)
}
mainMethod() {
concat(
this.firstGetHttp(this.input1.value, this.input2.value),
this.secondGetHttp(this.input1.value, this.input2.value),
this.thirdGetHttp(this.input1.value, this.input2.value),
).pipe(
filter(response => response && response.length),
take(1),
).subscribe(data => this.httpResults = data);

(顺便说一下，this.httpResults == []不是测试空数组的方式。它总是会评估为假。即使[] == []评估为假)。