Javascript 如何使用fofkJoin获得多个结果，然后使用这些结果？

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

所以我可以得到

这个.list1

，

这个.list2

，

这个.list3

和

这个.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的。

您几乎做对了。 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()
}

---

forkJoin接受的是可观察的，而不是subscribe方法返回的订阅。因此，您需要对代码进行一些重构

此外，不需要导入可观察的。您可以直接导入forkJoin

以下是一些很好的知识来源和示例：

从“rxjs/observable/forkJoin”导入{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'）；
返回forkJoin（[source1、source2、source3、source4]）
.订阅（[response1，response2，response3，response4]）=>{
//您可以在此处将响应分配给属性：
//this.list1=响应1。。。
此文件为.loadUiFromAllList（）
},
（错误）=>{
//在这里您可以处理错误
});

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([...])

---

是的，观测值（角度观测值很多）是你订阅的“函数”。进入“订阅”函数，在该函数中，您“接收到数据，并可以调用其他函数”

除了其他答案外，您还可以将输入观察值作为对象而不是数组发送。这样，当订阅中有太多响应时，更容易跟踪响应

例如，你可以做如下的事情

服务

getData（）{
返回叉连接(
{
url1:this.http.get（'url1'）.pipe（catchError（e=>of（'url1 error'）），
url2:this.http.get（'url2'）.pipe（catchError（e=>of（'URL2Error'）），
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(
结果=>{
console.log（result.url1）；
console.log（result.url2）；
console.log（result.url3）；
console.log（result.url4）；
}
);

这不是一个答案。只是一个注释。我解释了其中的每一步。为什么这不是一个答案？我希望你会发现它很有用。只有当observable未完成时，你才需要取消订阅。在Http请求的情况下，observable在接收到来自serverforkjoin的响应后完成。从rxjs@bryan60，您好，询问有关rxjs 5.5.6D的信息你的代码在

rxjs 5.5.6

中工作吗？你能捕获异常吗？这应该在5.5.6版本中工作，你可以通过向subscribe方法传递第二次回调来捕获错误。如果你能添加异常部分，那就太好了。我对你的代码有点困惑了。如何

这个.dataService.subscribe

链接到

forkJoin

llo，这是建议您应该在服务（可注入）和组件之间分割逻辑。dataService服务应该注入到组件构造函数中，但这是一个错误。这应该是：“this.dataService.getData（）.subscribe（…”