1

Eu preciso fazer uma requisição http para cada elemento do meu array produtosConfirmadosAnuncio.

Eu tentei fazer com for() mas as vezes isso não funciona, meu browser para de funcionar e custa fechar (pensei que pudesse ser pela quantidade de requisições disparadas, mas atualmente estou testando com apenas dois elementos no array e o browser continua travando).

Tentei dessa forma:

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();
        }
    })
}

Tem alguma outra forma que eu posso estar fazendo múltiplas requisições http?

2 Respostas 2

1

A solução vai depender muito do contexto do seu problema e do resultado que você espera.

Respondendo à pergunta do seu título: o que você quer provavelmente vai envolver o operador mergeMap. Com ele, o seu envio pode se tornar mais declarativo:

import { from } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

...

from(this.produtosConfirmadosAnuncio).pipe(
  mergeMap(produto => this.marketplaceService.anunciar(produto))
).subscribe(
  resp => {
    this.valorAtualProgress += this.quantidadeSomarProgress;
  },
  err => {
    this.loadingprogress = false;
    if (err.status == 401) {
      this.authService.Logout();
    }
  },
  () => {
    this.toastrService.showToast(true, 'Pronto!');
  }
);
4
  • O mergemap faria com que aguardasse o subscribe da requisição atual pra ir pra proxima? Commented 29/01/2019 às 18:10
  • 1
    @RenatoVeronese O mergeMap tem um parâmetro chamado concurrent que controla quantos subscribers internos existem ao mesmo tempo. O valor padrão é Number.POSITIVE_INFINITY, ou seja, por padrão "infinitas" requisições serão feitas simultaneamente. Você pode limitar o número de requisições simultâneas alterando este parâmetro. Commented 29/01/2019 às 18:30
  • vou testar e retorno aqui Commented 29/01/2019 às 18:32
  • Pelos testes que eu fiz aparentemente funcionou muito bem, obrigado Commented 30/01/2019 às 10:09
1

Creio que a causa do problema é porque o seu método retorna uma observable, ou seja, o processamento é assíncrono. Mas seu for vai seguir para a próxima interação mesmo que o retorno do observable não tenha ocorrido. Em um loop de 1000 interações por exemplo o javascript vai disparar 1000 requisições e registrar seus respectivos observable. Neste caso eu sugiro você tratar seu problema de 2 formas possíveis:

  1. Enviar uma requisição unica contendo um objeto com o array de itens que você precisa submeter. Neste caso ao invés de fazer um loop com varias requisições, você faz o for apenas para criar um objeto com os itens e submete este objeto na sua requisição. Isso implica em alterar sua API para atender essa alteração.
  2. Criar um método que consiga fazer controlar essa fila de itens que precisam ser enviado, de forma que seja feito uma especie de buffer de requisições. Seu método pode receber a lista de itens e retornar um observable para sinalizar quando a operação for concluída.
1
  • Existe um pattern chamado chamado publisher consumer que você pode usar como referencia para o seu problema. Commented 29/01/2019 às 13:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .