在Angular 9中，为什么我的订阅按顺序加载而不是并行加载？

我用的是角度9。我想加载一系列对象，每个对象都有图像数据。我想先加载所有对象，然后再加载图像数据。我的component.ts文件中有这个

  ngOnInit(): void {

    this.authService.getAllinLibrary().subscribe((res: any[]) => { 
      this.results = res;
      ...

      for (let i = 0; i < results.length; i++) {
        this.getTheImage(res[i].Id, i);
      }
    });



  getTheImage(imageId: number, index: number) {
    this.authService.getPersonImage(imageId).subscribe(data => {
      this.createImageFromBlob(data, index);
      this.isImageLoadingArr[index] = false;
      console.log("loaded image:" + index);
    }, error => {
      this.isImageLoadingArr[index] = false;
      console.log(error);
    });
  }
  

---

按顺序打印，使我相信调用不会同时执行。如何修改现有的内容，以使获取图像源的调用同时执行，而不是一次执行一个？

我认为最好的方法是实现forkJoin Rxjs规范：

     this.authService.getAllinLibrary().subscribe((res: any[]) => { 
          this.results = res;
          ...
     let observableBatch = [];

  results .forEach(( componentarray, key ) => {
    observableBatch.push( this.getTheImage(res[key ].Id, key); );
  });
 

      const getImagesObservable= forkJoin(observableBatch );
       
    getImagesObservable.subscribe({
     next: value => your Implementation Here
     complete: () => console.log('This is how it ends!'),
    });

---

}))

我认为最好的方法是实现forkJoin Rxjs规范：

     this.authService.getAllinLibrary().subscribe((res: any[]) => { 
          this.results = res;
          ...
     let observableBatch = [];

  results .forEach(( componentarray, key ) => {
    observableBatch.push( this.getTheImage(res[key ].Id, key); );
  });
 

      const getImagesObservable= forkJoin(observableBatch );
       
    getImagesObservable.subscribe({
     next: value => your Implementation Here
     complete: () => console.log('This is how it ends!'),
    });

---

}))

由于您的foreach循环，您将多次调用请求。并不是每个请求都在等待对方，而是foreach循环产生了微小的差异。如果您想调用多个请求，可以使用类似于

Promise.all

或

rxjs

forkJoin（）

的方法。看看这个博客：因为你的foreach循环，你会多次调用一个请求。并不是每个请求都在等待对方，而是foreach循环产生了微小的差异。如果您想调用多个请求，可以使用类似于

Promise.all

或

rxjs

forkJoin（）

的方法。看一看这个博客：跟进——这里您正在使用硬编码的“this.getTheImage（res[i].Id，i）”构建数组。如果我不知道在编译时有多少实例，我可以先构建一个数组，然后将其传递给“const getImagesObservable=forkJoin”（“您好，我刚刚编辑了我的答案，您可以使用变量可观察补丁设置订阅调用，并将其作为参数传递给fork join操作，如果有帮助，请向上投票：）谢谢！最后一个问题——订阅forkJoin，然后处理“next”和“complete”值。我注意到其他网站只有“订阅”方法处理的“结果”。这两者之间有什么实际的区别吗？接下来，您将使用硬编码的“this.getTheImage（res[i].Id，i）”构建数组。如果我不知道在编译时有多少实例，我可以先构建一个数组，然后将其传递给“const getImagesObservable=forkJoin”（“您好，我刚刚编辑了我的答案，您可以使用变量可观察补丁设置订阅调用，并将其作为参数传递给fork join操作，如果有帮助，请向上投票：）谢谢！最后一个问题——订阅forkJoin，然后处理“next”和“complete”值。我注意到其他网站只有“订阅”方法处理的“结果”。两者之间有实际区别吗？

     this.authService.getAllinLibrary().subscribe((res: any[]) => { 
          this.results = res;
          ...
     let observableBatch = [];

  results .forEach(( componentarray, key ) => {
    observableBatch.push( this.getTheImage(res[key ].Id, key); );
  });
 

      const getImagesObservable= forkJoin(observableBatch );
       
    getImagesObservable.subscribe({
     next: value => your Implementation Here
     complete: () => console.log('This is how it ends!'),
    });