如何使用forkJoin和ngrx在Angular6中進行多個HTTP調用？

Question

情境

在我的angular6應用中，我有三個類別，catA，catB和catC。 每個類別都需要來自3個API的數據 。 單擊任何類別后，它將加載CategoryDe​​tailsComponent，然后調度動作（LoadCategoryDe​​tails）。

我已經實現了forjoin來執行並行api調用（在服務中），還實現了resolver以確保所有調用都已完成，然后才應加載該組件。

問題

• 單擊catA（或頁面重新加載）后， categoryNames數組為空
• 在單擊的catB（第二路由）上， CategoryNames數組顯示上一類別（catA）的列表

也許其中一個api調用花費時間。 並且我的解析器配置不正確。

題

如何配置效果和解析器？

如何使用forkjoin進行多個調用並將數據發送到組件？

碼

1. dipatch操作並訂閱選擇器

    ngOnInit() { const id = parseInt(this.route.snapshot.paramMap.get('categoryId'), 10); this.store.dispatch(new fromCategory.LoadCategoryDetails(id)); this.store.select(getCategoryDetails) .subscribe((data) => { this.categoryDetails = data[0]; this.journeys = data[1]; this.categories = data[2]; }); // filter only category name // problem this.categories.forEach( category => { this.categoryNames.push(category.name); }); } 

2. 效果（尋找行動和電話服務）

    @Effect() loadCategoryDetails$ = this.actions$.pipe( ofType<fromCategory.LoadCategoryDetails>(CategoryActionTypes.LoadCategoryDetails), switchMap((action) => { return this.categoryService.getCategoryDetails(action.payload).pipe( map(data => new fromCategory.LoadCategoryDetailsSuccess(data)) ); }) ); 

3. 服務函數進行多個調用並使用forkjoin

    import { forkJoin } from 'rxjs'; getCategoryDetails(categoryId) { const categoryDetails = this.http.get(url); const journeys = this.http.get(url); const courses = this.http.get(url); return forkJoin([categoryDetails, journeys, courses]); } 

4. 解析器

    export class CategoryDetailsResolver implements Resolve<any> { constructor( private categoryService: CategoryService, private router: Router) {} resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { const categoryId = route.paramMap.get('categoryId'); return this.categoryService.getCategoryDetails(categoryId); } } 

提前致謝。

Answer 1

重構代碼以不使用route.snapshot，看看是否可以解決。

ngOnInit() {
this.route.data.subscribe((data) => {

if(data) {
 this.store.dispatch(new fromCategory.LoadCategoryDetails(data.id));

 this.store.select(getCategoryDetails)
          .subscribe((data) => {
            this.categoryDetails = data[0];
            this.journeys = data[1];
            this.categories = data[2];

 this.categories.forEach( category => {
  this.categoryNames.push(category.name);
  });
});

}

});

}

Answer 2

您對forkjoin的實現對我來說很好。 但是我可以在您的代碼中看到的一個問題是，您正在迭代getCategoryDe​​tails回調之外的類別。 由於它是異步的，因此應始終確保在進行迭代之前獲取類別。 為此，您應該將用於迭代類別的代碼移至成功的回調函數。

ngOnInit() {
    const id = parseInt(this.route.snapshot.paramMap.get('categoryId'), 10);
    this.store.dispatch(new fromCategory.LoadCategoryDetails(id));

    this.store.select(getCategoryDetails)
              .subscribe((data) => {
                this.categoryDetails = data[0];
                this.journeys = data[1];
                this.categories = data[2];

this.categories.forEach( category => {
      this.categoryNames.push(category.name);
    });
              });

    // filter only category name
    // problem

}