如何使用 fofkJoin 获得多个结果然后使用结果？

Question

我在 angular 5 应用程序中有多个 http 请求。

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。然后我想用这些数据来渲染UI。我使用顺序调用并花了一些时间。现在我想使用 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.

Answer 1

你几乎做对了。 forkJoin returns 一个可观察的而不是一个承诺。因此这应该看起来像这样：

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

请记住，每个订阅 returns 一个订阅对象，应该在销毁时删除。

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

Answer 2

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

Answer 3

forkJoin "join" 可观察对象

所以，一般来说你有一个服务

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..
})

嗯，在 rxjs 5.5.6 forkJoin 是

Observable.forkJoin([...])

是的，您订阅的 Observables（Angular 有很多 Observables）是 "functions"。是 INTO "subscribe" 函数，您在其中“接收数据并且可以调用其他函数

Answer 4

除了其他答案之外，您还可以将输入可观察对象作为对象而不是数组发送。当订阅中的响应过多时，可以更轻松地跟踪响应。

例如。你可以关注

服务

getData() {
  return forkJoin(
    {
      url1: this.http.get('url1').pipe(catchError(e => of('url1 error'))),
      url2: this.http.get('url2').pipe(catchError(e => of('url2 error'))),
      url3: this.http.get('url3').pipe(catchError(e => of('url3 error'))),
      url4: this.http.get('url4').pipe(catchError(e => of('url4 error'))),
    }
  )

然后您可以在订阅中使用他们的密钥来引用结果

控制器

this.dataService.getData().subscribe(
  result => {
    console.log(result.url1);
    console.log(result.url2);
    console.log(result.url3);
    console.log(result.url4);
  }
);

如何使用 fofkJoin 获得多个结果然后使用结果？

How to use fofkJoin to get multiple results then using the results?

javascript

angular

typescript

rxjs5