将每个数组项的 Promise 添加到 `Promise.all()`

Question

我有以下代码，其中我遍历了一个包含名称的列表，并在这种情况下使用每个名称来获取相应的房子。这很好用，但我想将所有承诺包含在Promise.all() 中 - 如何将每个名称的承诺动态添加到Promise.all()？这里有什么好的做法？

list = [
  'Name1',
  'Name2',
  'Name3'
];

this.houses = new BehaviorSubject<any>([]);

const promises = this.greatHouses.map(name => {
  let house;
  return this.fetchHouse(name).then((result: any[]) => {
    house = result[0];
    return result[0];
  }).then((result: any) => {
    return this.fetchLord(result.currentLord);
  }).then((result: any) => {
    const currentLord = Characters.default.find(char => char.characterName === result.name);
    return [{...house, currentLord}];
  });
});

Promise.all(promises).then(values => {
  console.log(values);
});

fetchHouse(name: string) {
  return this.http.get(`${this.housesUrl}`, {
    params: {
      name
    }
  }).toPromise();
}

fetchLord(url: string) {
  return this.http.get(url).toPromise();
}

Answer 1

根本不要使用 Promise。如果您使用的是 Angular 及其 HttpClient，请学习使用 Observables。

greatHouses = [
  'Name1',
  'Name2',
  'Name3'
];

// Construct and array of Observables that fetch your data
const houses$ = this.greatHouses.map(name => 
  this.fetchHouse(name).pipe(
    // map result to house
    map((result: any[]) => result[0]),
    // map house to an Observable that fetches the lord and return the required data
    switchMap((house: any) => this.fetchLord(house.currentLord).pipe(
      // map lord to house with currentLord
      map((lord: any) => {
        const currentLord = Characters.default.find(char => char.characterName === lord.name);
        return { ...house, currentLord };
      })
    ))
  )
);

// Combine an array of completing Observables with forkJoin to one Observable
forkJoin(houses$).subscribe(houses => console.log('houses', houses))

// Return Observables and handle errors with `catchError` directly where they occur.
fetchHouse(name: string) {
  return this.http.get(`${this.housesUrl}`, {
    params: {
      name
    }
  }).pipe(
    catchError(error => {
      console.error('fetchHouse failed', error);
      return of(null);
    })
  );
}

fetchLord(url: string) {
  return this.http.get(url).pipe(
    catchError(error => {
      console.error('fetchLord failed', error);
      return of(null);
    })
  );
}