如何使用 Angular 在同一个函数中进行多个 http 调用答案

【问题标题】：How to make multiple http calls in the same function with Angular如何使用 Angular 在同一个函数中进行多个 http 调用
【发布时间】：2020-07-03 10:26:03
【问题描述】：

我想要达到的目标： 从 component.ts 调用 this.getMatches 服务，在 this.getMatches 中我必须进行一些 API 调用并处理我得到的数据在它被推送到数组之前

我做了什么： 1：函数运行并将“gameId”作为参数发送给函数this.getmatches。我得到了每场比赛的数组，其中包含我推送到每场比赛的所有数据 2：经过多次尝试，我找到了一个有效的方法，但是返回数组时失败了

问题： 有时它会返回相同的匹配项，我注意到当我添加“swtichmap”运算符时会发生这种情况。

return

Services.ts

@Injectable({
  providedIn: 'root'
})
export class SummonerService {

  constructor( private http:HttpClient ) { }

  summonerName
  dataMatch
  matchParticipants
  matchHistory = [];

    getSummoner(summonerName,regionId){
    this.summonerName = summonerName
   return this.http.get(`http://localhost:3000/summName/${summonerName}/${regionId}` )
  };

   getMatches(gameId){
     return this.http.get( `http://localhost:3000/match/${gameId}` 
     ).pipe(
       tap( (data:any) => {
         console.log(data.match);
         this.dataMatch = data.match
         this.matchParticipants = data.match.participants
        }) ,
       switchMap( data => {
         return this.http.get(`http://ddragon.leagueoflegends.com/cdn/10.5.1/data/en_US/summoner.json`)
       }),
       tap( (data:any) =>{


         let spellsObj = data.data;
         const spellsArray:Array<any>[] = [];

         Object.keys(spellsObj).forEach( key =>{

           let spell = spellsObj[key]

           spellsArray.push(spell)
          });

          this.matchParticipants.forEach( participants => {

            let spellId1:any = spellsArray.find( (spell:any) => spell.key === JSON.stringify(participants.spell1Id) );
            let spellId2:any = spellsArray.find( (spell:any) => spell.key === JSON.stringify(participants.spell2Id) );


            let spellId1Image = `http://ddragon.leagueoflegends.com/cdn/10.5.1/img/spell/${spellId1.id}.png`
            let spellId2Image = `http://ddragon.leagueoflegends.com/cdn/10.5.1/img/spell/${spellId2.id}.png`

            participants.spellId1Info = spellId1
            participants.spellId2Info = spellId2

            participants.spellId1Info.image = spellId1Image
            participants.spellId2Info.image = spellId2Image
    });
       }),
       map ( data =>{ 
          return this.dataMatch
         })
       )};

我放了部分代码，但我需要进行更多这样的调用。

 switchMap( data => {
         return this.http.get(`http://x.json`)
       }),

我不知道这里的“switchmap”调用是否正确

Component.ts

onSubmit( ){

    this.summ.getSummoner( this.summoner.name,this.summoner.regionId )
    .pipe( 
      tap( (summoner:any) => this.matchHistory = summoner.matchHistory ),
      concatMap( (summoner:any) => {
        const observables = this.matchHistory
        .map( element => this.summ.getMatches(element.gameId));
          return forkJoin(observables)
      }),
      map( (matchesArray:any) => {
        let gameIdArray = this.matchHistory.map( element => element.gameId)

        this.matchesArray = matchesArray.sort((a, b) => {  
          return gameIdArray.indexOf(a.gameId) - gameIdArray.indexOf(b.gameId);
        });
        return matchesArray
      })
      ) .subscribe();

【问题讨论】：

你能做一个简单的堆栈闪电战来展示你的问题，我们可以看看吗？

标签： javascript angular typescript rxjs angular8

【解决方案1】：

switchMap 在我看来还不错，如果您对此不确定，请随时查看我关于此主题的博客文章：https://dev.to/rxjs/about-switchmap-and-friends-2jmm。

如果您想发出多个请求，您需要在switchMap 中应用组合运算符，可能是merge 或forkJoin。代码可能如下所示：

 switchMap( data => merge(
    this.http.get(`http://x.json`),
    this.http.get(`http://y.json`),
    this.http.get(`http://z.json`)
)),

所以问题是你想使用哪一个：

当您并不真正关心其他 HTTP 调用是否已经完成时，您想使用 merge。每次这些 HTTP 请求返回响应时，您都会在 switchMap 之后获得一个新值，并且您也只会得到那个响应。

当您关心所有 HTTP 调用在您开始之前完成时，您想使用 forkJoin。您还将获得一个 HTTP 响应数组，可用于继续处理。

【讨论】：