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

正如yo chauhan 所说。使用 merge 而不是 forkjoin。

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

& 用于排序 stuf 你可以创建一个自定义管道来对数组进行排序。

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>

Angular - 发送多个请求而无需等待所有请求

2 个答案: