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!