Angular Academy · Aula

Novas tentativas e indicadores de carregamento

Implemente novas tentativas e indicadores globais de carregamento.

Novas tentativas e indicadores de carregamento é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Duas preocupações transversais

Os interceptors são perfeitos para dois comportamentos de todo o aplicativo: repetir automaticamente requisições que falharam e acompanhar um estado de carregamento global enquanto qualquer requisição estiver em andamento.

Repetindo com retry

Encadeie retry após next(req) para tentar novamente falhas transitórias.

import { retry } from 'rxjs';

export const retryInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(retry(2));

Repetindo somente requisições seguras

Repita livremente métodos idempotentes (GET, HEAD); tenha cuidado ao repetir POST/PUT, pois isso pode causar duplicatas. Proteja essa lógica verificando o método.

export const retryInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.method !== 'GET') return next(req);
  return next(req).pipe(retry(2));
};

Repetindo com atraso e recuo exponencial

Adicione um atraso para que as novas tentativas não sobrecarreguem o servidor, usando recuo exponencial para aumentar a resiliência.

import { timer } from 'rxjs';

next(req).pipe(
  retry({
    count: 3,
    delay: (_err, n) => timer(Math.pow(2, n) * 500)
  })
);

Repetição condicional

Repita somente em erros que permitem nova tentativa (5xx ou de rede), não em erros de cliente 4xx, que falharão novamente.

retry({
  count: 2,
  delay: (err, n) =>
    err.status >= 500 ? timer(n * 500) : throwError(() => err)
})

Estado global de carregamento

Um serviço de carregamento acompanha a quantidade de requisições ativas para que a interface possa exibir um indicador global.

export class LoadingService {
  private active = signal(0);
  readonly isLoading = computed(() => this.active() > 0);
  start() { this.active.update(n => n + 1); }
  stop()  { this.active.update(n => Math.max(0, n - 1)); }
}

Interceptor de carregamento

Incremente no início da requisição e decremente na finalização (sucesso ou erro) usando finalize.

import { finalize } from 'rxjs';

export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
  const loading = inject(LoadingService);
  loading.start();
  return next(req).pipe(finalize(() => loading.stop()));
};

Por que usar finalize

finalize é executado na conclusão, em caso de erro ou de cancelamento da inscrição, garantindo que o contador de carregamento seja sempre decrementado — sem um indicador travado, mesmo quando a requisição falha ou é cancelada.

Exibindo o indicador de carregamento

Vincule o sinal de carregamento no seu modelo raiz.

// root component template:
// @if (loading.isLoading()) {
//   <app-spinner />
// }

Excluindo solicitações em segundo plano

Algumas solicitações de sondagem ou pré-busca não devem ativar o indicador de carregamento. Use um cabeçalho personalizado ou um token de contexto para ignorá-las.

import { HttpContextToken } from '@angular/common/http';
export const SKIP_LOADING = new HttpContextToken(() => false);
// in interceptor: if (req.context.get(SKIP_LOADING)) return next(req);

Combinando nova tentativa e carregamento

Ordene-os para que as novas tentativas ocorram dentro de um único período de carregamento: inicie o carregamento, faça novas tentativas internamente e finalize uma única vez. Coloque o carregamento na camada mais externa para abranger todas as tentativas.

Verificação rápida

Teste sua compreensão sobre novas tentativas e indicadores de carregamento.

Recapitulação: indicadores de nova tentativa e carregamento

Os interceptadores lidam de forma organizada com novas tentativas e com o carregamento global.

retry com atraso/retardo progressivo; restrinja-o a casos idempotentes ou que permitam novas tentativas.
Acompanhe as solicitações ativas em um serviço; use finalize para decrementar.
Use tokens de contexto para ignorar solicitações em segundo plano.

Você concluiu Interceptadores do HttpClient.

Perguntas Frequentes

A aula “Novas tentativas e indicadores de carregamento” é grátis?

Sim — o texto completo de “Novas tentativas e indicadores de carregamento” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Novas tentativas e indicadores de carregamento”?

Implemente novas tentativas e indicadores globais de carregamento. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Novas tentativas e indicadores de carregamento”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Interceptadores funcionais
Adicionando cabeçalhos de autenticação
Tratamento global de erros
Novas tentativas e indicadores de carregamento

← Voltar para Angular Academy