Angular 角度可观测,等待完成

Angular 角度可观测,等待完成,angular,rest,typescript,http,observable,Angular,Rest,Typescript,Http,Observable,我已经编写了一个小的angular应用程序,从RESTAPI获取数据。为此,我使用的是可观测的。我现在的问题是,它们是异步的 let tempArray: boolean[] = []; for (let i = 0; i < 3; i++) { this._myservice.checkData(data[i]).subscribe( result => { tempArray.push(result); co

我已经编写了一个小的angular应用程序,从RESTAPI获取数据。为此,我使用的是可观测的。我现在的问题是,它们是异步的

let tempArray: boolean[] = [];
for (let i = 0; i < 3; i++) {
    this._myservice.checkData(data[i]).subscribe(
        result => {
            tempArray.push(result);
            console.log('Before');
            console.log(tempArray);
        },
            error => console.log(error),
    );
}
console.log('After');
console.log(tempArray);
let tempArray:boolean[]=[];
for(设i=0;i<3;i++){
此._myservice.checkData(数据[i])。订阅(
结果=>{
tempArray.push(结果);
console.log('Before');
log(tempArray);
},
error=>console.log(错误),
);
}
console.log('After');
log(tempArray);
我现在的问题是,订阅之后,结果数据不在目标阵列中,如下图所示。我如何解决这个问题,而不将整个代码写入订阅


您可以使用
forkJoin
操作符。这就像承诺。所有的都是为了观察

import { forkJoin } from 'rxjs/observable/forkJoin';

forkJoin(
  this._myservice.checkData(data[0]),
  this._myservice.checkData(data[1]),
  this._myservice.checkData(data[2])
).subscribe(result => {
  // result[0] is the first result
  // result[1] is the second result
  // result[2] is the third result
});

唯一的方法是使用
async/await
,它基本上会将所有代码放在订阅中,只是会隐藏起来:

let tempArray: boolean[] = [];
const promises = Promise<bool>[];
for (let i = 0; i < 3; i++) {
    promises.push(this._myservice.checkData(data[i]).toPromise());
}

// now, we create a promise that groups the previous ones, and await for it:

try {
    tempArray = await Promise.all(promises);
} catch (err) {
    console.log(err)
}

console.log('After');
console.log(tempArray);
let tempArray:boolean[]=[];
const promises=Promise[];
for(设i=0;i<3;i++){
promises.push(this._myservice.checkData(data[i]).toPromise());
}
//现在,我们创建一个承诺,将之前的承诺分组,并等待它:
试一试{
tempArray=等待承诺。全部(承诺);
}捕捉(错误){
console.log(错误)
}
console.log('After');
log(tempArray);
正如您所看到的,
async/await
与承诺一起工作,而不是可观察的,但很容易将承诺转换为其他承诺-您只需确保导入
toPromise
from
RxJS


您可以在这里阅读更多关于
async/await
的信息

为什么需要它?它是处理订阅中与可观察到的生成值相关的任何代码的最佳方法。