2

我有一个从 API 获取数据的 Angular 应用程序。所以首先我的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
}

正如你所看到的，由于将所有这些调用相互嵌套，我将来的调用越多，它就会变得越混乱。我做了一些研究，得到了observables可以解决问题的想法。所以我更改了代码，这就是现在的样子 - 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的过滤后的 Array 的信息。这就是为什么我很难应用像forkJoin这样的解决方案。所以我的问题是，如果这是一个好的解决方案，或者您是否知道更好的方法来减少代码混乱并保持功能？

4

4 回答 4

3

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. 我们订阅此管道以获得最终结果

如果您不订阅管道，它将永远不会被触发

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

要使用该库，您只需要做一件事：

  • 永远不要把 Observable 放在 Observable 里面

一些问题参考（感谢@LingVu）：

于 2019-12-13T09:20:06.797 回答
2

使用switchMap运算符在可观察对象之间切换...

this.dataService.getData1().pipe(
  switchMap(data1 => {
    // do whatever with data1
    return this.dataService.getData2()
  }),
  tap(data2 => {
    // do whatever with data2
    return this.dataService.getData3()
  })
).subscribe()
于 2019-12-13T09:08:07.813 回答
0

您可以尝试异步等待方法

async ngOnInit() {
    const data1 = await this.dataService.getData1().toPromise();
    // apply certain filter to get a filtered array out

    const data2 = await this.dataService.getData2().toPromise();
    // apply certain filter to get a filtered array out

    const data3 = await this.dataService.getData3().toPromise();
    // apply certain filter to get a filtered array out
}

您也可以尝试合并地图

this.dataService.getData1()
.pipe(
  map((data1) => {
    // code: filter data here
    return data1;
  }),
  mergeMap((data1) => {
    this.dataService.getData2();
  })
)
.subscribe((finalData) => {
});

或 concatMap

this.dataService.getData1()
  .pipe(
    tap(data1 => console.log(data1)),
    concatMap((data1) => {
      this.dataService.getData2(data1);
    }),
    tap(data2 => console.log(data2)),
    concatMap((data2) => {
      this.dataService.getData3(data2);
    }),
    tap(data3 => console.log(data3)),
  )
  .subscribe(result => {
    console.log(result)
  });
于 2019-12-13T09:02:24.833 回答
0

关于链接 Rxjs，因为这是一个常见问题，你可以参考一些之前关于 SO 的问题，其中：

于 2019-12-13T09:16:25.113 回答