Как использовать fofkJoin для получения нескольких результатов, а затем использовать результаты? - PullRequest
Новая
       20

Как использовать fofkJoin для получения нескольких результатов, а затем использовать результаты?

1 голос
/ 26 марта 2020

У меня несколько запросов http в приложении angular 5. 

const response1 = this.http.get('url1').subscribe(data => {
    this.list1 = data;
});

const response2 = this.http.get('url2').subscribe(data => {
    this.list2 = data;
});

const response3 = this.http.get('url3').subscribe(data => {
    this.list3 = data;
});

const response4 = this.http.get('url4').subscribe(data => {
    this.list4 = data;
});

Так что я могу получить this.list1, this.list2, this.list3 и this.list4. Затем я хочу использовать эти данные для визуализации интерфейса. Я использовал последовательный звонок и занял некоторое время. Теперь я хочу использовать forkJoin.

Мой код нравится. 

const response1 = this.http.get('url1').subscribe(data => {
    this.list1 = data;
});

const response2 = this.http.get('url2').subscribe(data => {
    this.list2 = data;
});

const response3 = this.http.get('url3').subscribe(data => {
    this.list3 = data;
});

const response4 = this.http.get('url4').subscribe(data => {
    this.list4 = data;
});

return Observable.forkJoin([response1, response2, response3, response4]).then(this.loadUiFromAllList());

Я не уверен, как правильно его использовать? Как я могу получить результаты от forkJoin и что-то делать? Это для rxjs 5.5.6.

Ответы [ 4 ]

1 голос
/ 26 марта 2020

В дополнение к другим ответам вы также можете отправлять входные наблюдаемые в виде объекта вместо массива. Это облегчает отслеживание ответа, когда в подписке слишком много ответов.

Например. Вы можете что-то вроде следующего

1 голос
/ 26 марта 2020

forkJoin принимает Observables, а не подписки, которые возвращаются методом подписки. Так что вам нужно немного реорганизовать ваш код.

Также нет необходимости импортировать Observable. Вы можете импортировать forkJoin напрямую.

Вот хороший источник знаний и примеров: https://www.learnrxjs.io/learn-rxjs/operators/combination/forkjoin

import {forkJoin} from "rxjs/observable/forkJoin";

const source1 = this.http.get('url1');

const source2 = this.http.get('url2');

const source3 = this.http.get('url3');

const source4 = this.http.get('url4');

return forkJoin([source1, source2, source3, source4])
  .subscribe(([response1, response2, response3, response4]) => {
    // here you can assign responses to properties: 
    // this.list1 = response1...
    this.loadUiFromAllList()
  },
  (error) => {
    // here you can handle error
  });
0 голосов
/ 26 марта 2020

forkJoin "join" Observables

Итак, в общем, у вас есть сервис 

getData()
{
  return forkJoin([this.http.get('url1'),
                   this.http.get('url2'),
                   this.http.get('url3'),
                   this.http.get('url4')])
}

И в компоненте вы подписываетесь на getData 

this.dataService.subscribe(([list1, list2, list3, list4])=>{
   this.list1=list1
   this.list2=list2
   this.list3=list3
   this.list4=list4
   ..do here what do you want..
})

Ну, в rx js 5.5.6 forkJoin - это 

Observable.forkJoin([...])

Да, наблюдаемые (и Angular - это полное множество наблюдаемых) - это «функции», на которые вы подписаны. Находится ли в функции «подписки», когда вы «получили данные и где вы можете вызывать другие функции

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

Вы почти все делаете правильно. forkJoin возвращает наблюдаемое, а не обещание. Для этого это должно выглядеть примерно так: 

import { forkJoin } from 'rxjs';
...
sub: Subscription;
...
this.sub = forkJoin(
    [response1, response2, response3, response4]
).subscribe(([res1, res2, res3, res4]: [type1, type2, type3, type4]) => {
    // logic
});

Пожалуйста, помните, что каждая подписка возвращает объект подписки, который должен быть удален при уничтожении. 

ngOnDestroy() {
    this.sub.unsubscribe()
}
...