我怎样才能在角度同时发出HTTP请求?

时间:2019-01-28 12:40:48

标签: angular typescript

我需要对produtosConfirmadosAnuncio数组的每个元素发出http请求。

我正在尝试使用for(),但是有时这不起作用,我的浏览器停止工作了(我正在测试for中的两个元素)。

我这样尝试:

for(let i=0;i<this.produtosConfirmadosAnuncio.length;i++){
    this.marketplaceService.anunciar(this.produtosConfirmadosAnuncio[i])

.pipe(
        take(1)
    )
    .subscribe((res) => {

        this.submited = false;

        for (let c = 0; c < this.produtosConfirmadosAnuncio.length; c++) {
            if (this.produtosConfirmadosAnuncio[c].id == this.produtosConfirmadosAnuncio[i].id) {
                this.produtosConfirmadosAnuncio.splice(c, 1)
            }
            c--;
        } //Remove the element when requisition return success


        this.valorAtualProgress += this.quantidadeSomarProgress; //sum progress bar


        if (this.valorAtualProgress == 100) { //close the progress bar when value is 100
            this.toastrService.showToast(true, "Pronto!", res.mensagem);
        }

    }, (err) => {
        this.loadingprogress = false
        if (err.status == 401) {
            this.authService.Logout();
        }
    })
}

还有其他方法吗?也许等待第一个请购单答复继续?

1 个答案:

答案 0 :(得分:1)

为此,我将使用RxJS forkJoin运算符。 forkJoin运算符将订阅并运行每个Observable,收集每个发出的值,最后发出包含所有已完成的HTTP请求的单个数组值。

  

此运算符类似于Promise.all,将在返回结果之前等待所有可观察对象完成。

import { forkJoin } from 'rxjs';
import { take } from 'rxjs/operators';

const requests = this.produtosConfirmadosAnuncio.map(p => {
    return this.marketplaceService.anunciar(p).pipe(take(1));
});

forkJoin(requests).subscribe(results => {
    // use results[0] for the first call
    //     results[1] for the second one ...
    ...
});

这是关于运算符的RxJS doc。这是article,显示了其用于同时发出多个HTTP请求的用法。