如何在加载其余数据时在 Angular 中预加载一部分数据？

Question

当我尝试加载第一页数据并在后台加载整个数据集时显示它时，我认为我很聪明。我使用了以下代码。

ngOnInit() {
  this.service.getStuff(0, 10)
    .subscribe(suc => this.subset = suc);

  this.service.getStuff()
    .subscribe(suc => this.data = suc);
}

然后，我在我的 API 中设置断点，获取并释放第一个调用并保持未释放的第二个调用。但是，根据我浏览器中的网络选项卡，两个调用都待处理，直到两个调用都完成。

我离预载工作很近还是很远？

实际调用是通过通常的 HttpClient 和 GET 执行的，返回一个 observable。

Answer 1

你最好使用一些 RxJS 操作符。

这将触发两个 GET。先到先得。

merge(this.service.getStuff(0, 10), this.service.getStuff()).subscribe(data => {
  // do stuff with data
});

下面，switchMap 将使 allStuff$ 仅在 initialStuff$ 发出后触发。 这将仅在第一个 GET 发出后触发第二个 GET。

const intialStuff$ = this.service.getStuff(0, 10).pipe(
  share()
);

const allStuff$ = intialStuff$.pipe(
  switchMap(() => this.service.getStuff())
);

intialStuff$.subscribe(...);
allStuff$.subscribe(...)

请注意，由于没有任何请求会阻塞渲染，因此您绝对应该使用第一种方法。它将更快地获取所有数据。

Answer 2

Angular HttpClients get() 每次都应该返回一个新的 Observable，并且不会表现出您描述的行为。

这完全取决于this.service.getStuff() 的实现。如果实现如下所示，它应该在每次调用时返回一个新的Observable，并使其独立于任何其他调用/订阅。

doStuff() {
    return this.http.get('someUrl');
}

Here's an example of the two observable calls working independent of each other - 我延迟了帮助演示。当您运行它时，第一次调用将完成并在第二次调用之前呈现。

具有初始化逻辑的组件：

ngOnInit(){
this.myService.doSomething('todos/1', 100)
  .subscribe(resp => {
    this.first = resp;
  });

this.myService.doSomething('comments', 1500)
  .subscribe(resp => {
    this.second = resp;
  })
}

示例服务：

@Injectable()
export class MyService {
  constructor(private http: HttpClient){}

  doSomething(route: string, withDelay?: number) {
    return this.http.get('https://jsonplaceholder.typicode.com/' + route)
      .pipe(delay(withDelay));
 }
}