-2

Eu estou realizando uma chamada para API que me retorna uma lista de um obj qualquer quando eu clico em um button. Ou seja se eu clico duas vezes em sequência, a API me retorna a mesma lista em sequência também.

Minha dúvida é, como eu faço para se eu clicar duas vezes rápido em sequência, eu cancelar a primeira request e pegar apenas o valor do ultimo click. Eu tentei utilizar o Switmap, porém não tive sucesso. Segue o código abaixo...

getBookingByUserAndStatus(): void
{
        this.loading = true;
        const getByUserAndStatus = this._bookingsService.getByUserAndStatus(this.user._id, this.statusSelect).subscribe(resp => 
        {
            console.log(resp);
            this.loading = false;
            this._foverNotificationService.notify('Lista carregada', SnackbarStatusEnum.success);
        },
        error =>
        {
            this.loading = false;
            this._foverNotificationService.notify(error, SnackbarStatusEnum.error);
        },
        () => getByUserAndStatus.unsubscribe());
}

inserir a descrição da imagem aqui

Se eu clico 2 vezes em sequência no botão teste, eu recebo 2 vezes em sequência a resposta da API como mostra a notificação..

Desde já agradeço....

2 Respostas 2

-1

Tente utilizar o take(1).

Ficaria mais ou menos assim:

this._bookingsService.getByUserAndStatus(this.user._id, this.statusSelect)
        .pipe(take(1))
        .subscribe(resp => ... );
2
  • Também não funcionou, eu editei minha pergunta, colocando visualmente o que acontece!! Commented 29/02/2020 às 18:23
  • Tenta sem o getByUserAndStatus.unsubscribe(). Commented 29/02/2020 às 19:14
-2

Sei que já se passou um tempo desde a pergunta mas mesmo assim vou tentar consolidar uma resposta tendo em vista que essa pode ser a dúvida de outros devs futuramente.

Conforme foi perguntado, na minha resposta eu vou seguir a linha de sempre considerar apenas a requisição ativada pelo click mais recente num botão, ou seja, desconsiderar requisições dos clicks anteriores.

Minha abordagem usa o switchMap e tentei ser bem didático no exemplo de forma que pode ser verificado no console do navegador o que está ocorrendo por baixo do capô através dos console.log(). Também comentei o código de forma que possa ser mais facilmente compreendido e aplicado.

Tive o cuidado de adicionar no código completo uma abordagem para fazer o "unsubscribe", mas como não é o foco da pergunta, não passarei por isso.

Explicando passo-a-passo

Ao invés de executar a ação do click diretamente no método do binding, a estratégia é a cada click lançar emissões num Subject.

  // Faça o binding do botão para este método aqui
  executarAcao() {
    (...)
    this.clickBotaoSubject$.next();
  }

Use o switchMap para considerar apenas a emissão mais recente do clickBotaoSubject$, ou seja, considerar apenas o último click no botão para então efetuar um novo request:

  observaApenasClickMaisRecente$ = this.clickBotaoSubject$.asObservable().pipe(
    (...)
    // Troque o `requestSimulado$` pelo seu request da API
    switchMap((_) => this.requestSimulado$)
  );

Então, inscreva-se no observaApenasClickMaisRecente$ para executar as ações necessárias da sua aplicação. Aqui estou usando o método construtor para a inscrição, mas poderia ser no ngOnInit ou outro que método que execute apenas uma vez ao iniciar o componente:

constructor() {
    this.observaApenasClickMaisRecente$.subscribe({
      next: (resposta) => {
        // só o último click chegará aqui
        console.log(resposta.message);
      },
      error: (_err: any) => {
        // trata o erro
      },
      complete: () => {
        // executa alguma coisa, se for o caso
        console.log('Completou');
      },
    });
  }

Exemplo de saídas de log no console

Click único

-----------------------------
Clicou no botão Executar Ação
Contador do click atual é 1
Retorno da API para o click 1  <-- como foi um click sozinho, retornou resultado

3 clicks rápidos seguidos

-----------------------------
Clicou no botão Executar Ação
Contador do click atual é 2
-----------------------------
Clicou no botão Executar Ação
Contador do click atual é 3
-----------------------------
Clicou no botão Executar Ação
Contador do click atual é 4
Retorno da API para o click 4     <-- ignorou os clicks 2 e 3, então retorna a última request do click 4 

Código completo

typescript

@Component({
  selector: 'app-teste',
  templateUrl: './teste.component.html',
  styleUrls: ['./teste.component.css'],
})
export class TesteComponent implements OnDestroy {
  // Para verificação do funcionamento
  // fins didáticos
  contador = 0;

  // usado para fazer "unsubscribe"
  untilDestroyNotify$ = new Subject<void>();

  // Subject emitirá "eventos" de click no botão
  clickBotaoSubject$ = new Subject<void>();

  // Simula uma requisição a uma API
  // que retorna após 2 segundos
  requestSimulado$ = defer(() =>
    of({ message: `Retorno da API para o click ${this.contador}` }).pipe(
      delay(2000)
    )
  );

  // Observable que emitirá apenas a última requisição
  observaApenasClickMaisRecente$ = this.clickBotaoSubject$.asObservable().pipe(
    // esse `tap` serve apenas para demonstração
    tap({
      next: () => {
        this.contador++;
        console.log(`Contador do click atual é ${this.contador}`);
      },
    }),

    // O switchMap irá desconsiderar as emissões dos clicks anteriores
    // e considerar apenas a emissão do click mais recente...
    // Troque o `requestSimulado$` pelo seu request da API
    switchMap((_) => this.requestSimulado$),
    takeUntil(this.untilDestroyNotify$)
  );

  constructor() {
    this.observaApenasClickMaisRecente$.subscribe({
      next: (resposta) => {
        // só o último click chegará aqui
        console.log(resposta.message);
      },
      error: (_err: any) => {
        // trata o erro
      },
      complete: () => {
        // executa alguma coisa, se for o caso
        console.log('Completou');
      },
    });
  }

  // Faça o binding do click do botão para este método aqui
  executarAcao() {
    console.log('-----------------------------');
    console.log('Clicou no botão Executar Ação');

    // Cada click no botão gera uma emissão de click
    // para ser tratada pelo `observaApenasClickMaisRecente`
    this.clickBotaoSubject$.next();
  }

  ngOnDestroy(): void {
    this.untilDestroyNotify$.next();
    this.untilDestroyNotify$.complete();
  }
}

html

<button (click)="executarAcao()">Executar Ação</button>

Aviso

Com essa abordagem o frontend só receberá a resposta da última requisição à API, mas isso não significa que a API não receberá e processará todas as requisições anteriores, e dessa forma, podendo ocasionar inconsistências na sua aplicação... É bom ficar de olho.

Espero ter ajudado!

1
  • Alguém poderia esclarecer o motivo dos down votes para que eu possa evoluir minha resposta à contento? Vejo que participar do StackOverflow em Português têm sido mais dificultado do que o StackOverflow principal...
    – Jonas Ruth
    Commented 26/06/2023 às 14:25

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 .