Início / coding / Perguntas / 79551842
Accepted
Nhut Truong
Asked: 2025-04-03 09:55:42 +0800 CST

Como posso continuar atualizando um observable ao clicar em um botão quando ocorre um erro de observable no Angular?

  • 772

Estou trabalhando em um aplicativo Angular onde busco dados de uma API e os exibo usando meu pipe de estado personalizado e pipe assíncrono. Há um botão para atualizar a chamada da API. No entanto, se ocorrer um erro, o observable para de emitir valores e não consigo mais atualizá-lo.

estado.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { Observable, catchError, map, of, startWith } from 'rxjs';

type ObsState<T> = Observable<ObsStateAsync<T>>;

export type ObsStateAsync<T> = { loading: boolean; result?: T; error?: any };
@Pipe({
  name: 'state',
})
export class StatePipe implements PipeTransform {
  transform<T>(val: Observable<T>): ObsState<T> {
    return val.pipe(
      map((value: any) => ({ loading: false, result: value })),
      startWith({ loading: true }),
      catchError((error) => of({ loading: false, error }))
    );
  }
}

@Component({
  selector: 'app-root',
  template: `
    <button (click)="onRefresh()">Refresh</button>
    @let breedState = breeds$ | state | async;

    @if(breedState?.loading){
      Fetching ...
    }

    @if(breedState?.error){
      Error
    }

    @if(breedState?.result){
      @for(breed of breedState?.result;track $index){
        <div> 
          {{ breed.attributes.name }}
        </div>
      }
    }
  `,
  imports: [StatePipe, AsyncPipe],
})
export class App {
  private readonly httpClient = inject(HttpClient);

  refresh = new BehaviorSubject<void>(undefined);

  getBreed$ = this.httpClient
    .get('https://dogapi.dog/api/v2/breeds') // Modify API endpoint to create an error
    .pipe(map((res: any) => res.data));

  breeds$ = this.refresh.asObservable().pipe(switchMap(() => this.getBreed$));

  onRefresh(): void {
    this.refresh.next();
  }
}

E eu não quero fazer catchError(()=>of([]))isso porque o erro precisa ser exibido na interface do usuário.

Stackblitz para o meu problema

angular

1 respostas

  1. Best Answer

    Você precisa colocar o catchErrordentro do pipe do observable http, então eu sugiro um rxjsoperador de pipe reutilizável stateTransformque basicamente faz a mesma coisa, mas está dentro do pipe do http.get.

    type ObsState<T> = Observable<ObsStateAsync<T>>;

export type ObsStateAsync<T> = { loading: boolean; result?: T; error?: any };

function stateTransform<T>(source$: Observable<T>): ObsState<T> {
  return source$.pipe(
    startWith({ loading: true }),
    map((value: any) => ({ loading: false, result: value })),
    catchError((error) => of({ loading: false, error }))
  );
}

    Você só precisa adicionar este operador reutilizável abaixo da maptransformação.

    getBreed$ = this.httpClient
  .get<BreedResult>('https://dogapi.dog/api/v2/breedss') //modify api endpoint to create error
  .pipe(
    map((res: BreedResult) => res.data),
    stateTransform
  );

    Código completo:

    import { Component, inject } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { StatePipe } from './state.pipe';
import { AsyncPipe } from '@angular/common';
import {
  BehaviorSubject,
  map,
  switchMap,
  Observable,
  startWith,
  catchError,
  of,
} from 'rxjs';

export interface BreedResult {
  data: Array<any>;
}

@Component({
  selector: 'app-root',
  template: `
  <button (click)="onRefresh()">Refresh</button>
  @let breedState = breeds$ | async;

  @if(breedState?.loading){
    Fetching ...
  } @else if(breedState?.error){
    Error
  }  @else if(breedState?.result){
    @for(breed of breedState?.result;track $index){
      <div> 
      {{breed.attributes.name}}
    </div>
    }
  }
  `,
  imports: [StatePipe, AsyncPipe],
})
export class App {
  private readonly httpClient = inject(HttpClient);

  refresh = new BehaviorSubject<void>(undefined);

  getBreed$ = this.httpClient
    .get<BreedResult>('https://dogapi.dog/api/v2/breedss') //modify api endpoint to create error
    .pipe(
      map((res: BreedResult) => res.data),
      stateTransform
    );

  breeds$ = this.refresh.asObservable().pipe(switchMap(() => this.getBreed$));

  onRefresh(): void {
    this.refresh.next();
  }
}

bootstrapApplication(App, { providers: [provideHttpClient()] });

type ObsState<T> = Observable<ObsStateAsync<T>>;

export type ObsStateAsync<T> = { loading: boolean; result?: T; error?: any };

function stateTransform<T>(source$: Observable<T>): ObsState<T> {
  return source$.pipe(
    startWith({ loading: true }),
    map((value: any) => ({ loading: false, result: value })),
    catchError((error) => of({ loading: false, error }))
  );
}

    Demonstração do Stackblitz

    • 1

relate perguntas