angular - 在 Angular 中使用可观察量进行 http 请求的最佳方法是什么？

Question

我有一个 Angular 应用程序，可以从 API 获取数据。首先，我的 detail.component.ts 代码看起来像这样:

//code
getData()
{
this.http.get(url1).subscribe(data1 => 
{/*code: apply certain filter to get a filtered array out*/

this.http.get(url2).subscribe(data2 => 
{/*code: apply certain filter to get a filtered array out*/

this.http.get(url3).subscribe(data3 => 
{/*code: apply certain filter to get a filtered array out*/
})//closing third subscribe form

})//closing second subscribe form
})//closing first subscribe form
}

正如您所看到的，由于所有这些调用都嵌套在一起，将来我的调用越多，事情就会变得越困惑。我做了一些研究并得到了一个想法，可观察可能会解决这个问题。所以我更改了代码，这就是现在的样子 - data.service.ts:

//code
getData1()
{this.data1 = this.http.get(this.url1)
return this.data1;}

getData2()
{this.data2 = this.http.get(this.url2)
return this.data2;}

getData3()
{this.data3 = this.http.get(this.url3)
return this.data3;}

detail.component.ts:

//code
ngOnInit()
{
this.dataService.getData1().subscribe(data1 => 
{/*code: apply certain filter to get a filtered array out*/

this.dataService.getData2().subscribe(data2 => 
{/*code: apply certain filter to get a filtered array out*/

this.dataService.getData3().subscribe(data3 => 
{/*code: apply certain filter to get a filtered array out*/
})//closing third subscribe form

})//closing second subscribe form
})//closing first subscribe form
}

Data1 必须首先执行，因为 Data2 和 Data3 需要从 Data1 中过滤后的数组信息。这就是为什么我很难应用像 forkJoin 这样的解决方案。所以我的问题是，这是否是一个好的解决方案，或者您是否知道更好的方法来使代码不那么困惑并保留功能？

Answer 1

Observable 可以提供大量方法和工具来创建美观且可读的管道。这是一个例子:

// my.service.ts
getData1(): Observable {
  return this.httpClient.get();
}

getData2(): Observable {
  return this.httpClient.post();
}

getData3(): Observable {
  return this.httpClient.get();
}

my.component.ts

ngOnInit() {
  this.myService.getData1().pipe(
    map(data => {
      // do what you want with the request answer
      data.id += 1;
      return data;
    }),
    // Pass the modified data and return the Observable for the getData2 request
    switchMap(data => this.myService.getData2(data)),
    // RxJs have a ton of feature to let you play with the data and the pipeline
    // This will wait for 2000ms
    delay(2000),
    // Pass the data returns by getData2 requests to the method getData3
    switchMap(data => this.myService.getData3(data)),
  ).subscribe(
    data => console.log(data); // The result of your pipeline
  )
}

这里发生了什么:

1. getData1() 被调用并将返回 HttpRequest 的 Observable
2. 我们修改之前发出的请求的结果(增加 id)
3. 我们使用修改后的结果调用 getData2，它返回请求的 Observable
4. 我们等待 2000 毫秒才能继续
5. 我们使用 getData2 请求的结果来调用 getData3
6. 我们订阅此管道以获得最终结果

If you do not subscribe to a pipeline, it will never be triggered

RxJs 是一个非常庞大且不错的数据处理库，但太多人并不真正不知道如何很好地使用它。

要使用该库，您只需遵循一件事:

• 永远不要将 Observable 放入 Observable 中

一些问题引用(感谢@LingVu):

• How to do the chain sequence in rxjs

• RxJS Promise Composition (passing data)

• RxJS sequence equivalent to promise.then()?