如何等待，循环的下一个迭代以从Angular中获得API的响应？

Question

我正在学习角度。 我在循环中调用功能。该功能正在调用API请求并从服务器中获得一些响应。我正在使用一些数据上传多个文件。

在调用API时，请求其随机文件与FormData中的文件数组中的数据一起获取随机文件。

问题在于，数据是根据文件的特定索引上传到第一次迭代中的第一个文件，在第二个迭代中，应该有第二个文件，但是FormData是从数组中获取下一个或有时是先前的文件文件。

我想等到获得API的响应，然后处理下一个迭代。如何实现？ 我的代码如下： 浏览多个文件后，请在按钮上单击“ generate”函数。 变量 - ：this.filestoupload包含多个文件。

generate() {
    for(var i = 0; i<this.data.length; i++){
        var name= this.data[i];
        if(this.data.length != 10){
            this.alertService.danger('Name');
            return false;
        }else{
            this.uploadData2(name, i)
        }          
    }
}

uploadData2(myname, loopIndex) {
   var body = {number:"1234"}

   this.http.post(URL, body)
            .subscribe((data: any) => {
              uploadData3(myname, loopIndex);
            });

}

uploadData3(myname, loopIndex) {
   var formData = new FormData();
   const files: Array<File> = this.filesToUpload;
   formData.append("uploads[]", files[loopIndex], files[loopIndex]['name']);
   formData.append("myname", myname);

   this.http.post(URL, formData)
            .subscribe((data: any) => {
              //ressponse here
            });

}

Answer 1

如评论中的建议；请花一些时间学习RXJ。当您像代码中一样使用异步调用（和功能）时，这将为您提供帮助。

解决拼图的一种方法是，在服务器上生成一个带有httpcalls的可观察数组阵列的顺序）。

它需要一些时间来学习，但是您不会后悔！

generate() {
    let obsArray = Observable<any>[]=[];
    for(var i = 0; i<this.data.length; i++){
        var name= this.data[i];
            obsArray.push(this.uploadData2(name, i))          
    }
    concat(obsArray).subscribe(res=>console.log("After merge:",res))
}

uploadData2(myname, loopIndex) {
   var body = {number:"1234"}

   return this.http.post(URL, body)
      .pipe()
            mergeMap(data => 
              uploadData3(myname, loopIndex);
            );

}

uploadData3(myname, loopIndex) {
   var formData = new FormData();
   const files: Array<File> = this.filesToUpload;
   formData.append("uploads[]", files[loopIndex], files[loopIndex]['name']);
   formData.append("myname", myname);

   return this.http.post(URL, formData)
        .pipe(tap(... some side effects here...))

}

该代码未进行测试，但应该让您了解其应该如何外观。