Angular——不用等待就发送多个请求

Question

我想发送许多请求并显示结果，而无需等待所有请求。为了进行测试，我在PHP API方法中插入以下代码:sleep(rand (1,10))。因此，响应到达的时间长度不同。但是我的angular客户端等待所有的响应，然后显示结果:

let requests = [];
for(let id of ids)
requests.push(this.http.get(`api/some/${id}`));
this.results$ = forkJoin(requests);

和模板:

<p *ngFor="let result of results$ | async">{{result.id}}</p>

如何在不等待所有响应的情况下显示结果?我能对结果排序吗，比如按ID排序?

感谢

Answer 1

asyo chauhan说。使用merge代替forkjoin

let requests = [];
for(let id of ids)
requests.push(this.http.get(`api/some/${id}`));
this.results$ = merge(requests);

,为了排序，我们可以创建一个自定义管道来对数组进行排序。

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sort'
})
export class SortPipe implements PipeTransform {
transform(array: any[],sortBy: string): any[] {
return array.sort(function(a, b) {
if (a[sortBy] < b[sortBy])
return -1;
if (a[sortBy] > b[sortBy])
return 1;
return 0;
});
}
}

并在你的Html模板中使用。

<p *ngFor="let result of (results$ | async) | sort: 'id'">{{result.id}}</p>

Answer 2

我认为forkJoin会等到所有问题都解决后再发射。

我要做的是在本地有一个结果数组，并把它推送到这个数组

let results = [];
for (let id of ids)
this.http.get(`api/some/${id}`).subscribe(result => {
this.results = [...this.results, ...result];
});

<p *ngFor="let result of results">{{result.id}}</p>