Как сделать несколько вызовов HTTP в одной функции с помощью Angular - PullRequest
Новая
       4

Как сделать несколько вызовов HTTP в одной функции с помощью Angular

0 голосов
/ 23 марта 2020

Чего я хочу добиться: Выполнять вызовы из component.ts в сервис this.getMatches, в this.getMatches Мне нужно сделать несколько вызовов API и работать с данными, которые я получаю, прежде чем они будут отправлены в массив

Что я сделал: 1: функция запускается и отправляет "gameId" в качестве аргумента функции this.getmatches. Я получаю массив каждого совпадения со всеми данными, которые я отправлял в каждое совпадение 2: я смог найти метод, который работал после многих попыток, но он не удался при возврате в массив

Проблема: Иногда он возвращает то же совпадение, я заметил, что это происходит, когда я добавляю оператор "swtichmap".

return

Сервисы. 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`)
       }),

Я не знаю, был ли здесь правильный вызов с «картой переключения», либо

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();

1 Ответ

1 голос
/ 13 апреля 2020

switchMap здесь выглядит довольно хорошо для меня, если вы не уверены в этом, не стесняйтесь проверить мой блог об этом topi c: 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 уже завершены. Вы получите новое значение, генерируемое после switchMap каждый раз, когда один из этих HTTP-запросов возвращает ответ, и вы также получите только этот самый ответ.

Вы хотите использовать forkJoin , когда вам нужно что все HTTP-вызовы завершены до того, как вы go один. Вы также получите массив HTTP-ответов, которые вы можете использовать для продолжения обработки.

...