Как сохранить наблюдаемые RxJ от завершения при ошибке? - PullRequest
Новая
       19

Как сохранить наблюдаемые RxJ от завершения при ошибке?

0 голосов
/ 27 марта 2019

У меня есть угловая реактивная форма , которая делает простой запрос GET.Если, например, я должен получить какую-то ошибку HTTP.Наблюдаемое todo$ завершено. Я больше не могу изменить параметры поиска и нажмите, чтобы повторить поиск.Я сделал демо stackblitz , в демо я добавил свою подписку внутри инициализатора и, если в потоке есть ошибка, я ее ловлю.После того, как я поймаю его, я снова вызываю инициализатор.Это работает, но кажется неправильным способом обработки ошибок.

Я настроил форму, чтобы можно было отменять предыдущие запросы HTTP. 

export class AppComponent implements OnDestroy {
  todos;
  loading = false;
  useFakeURL = false;
  todoSub$: Subscription;
  todo$: BehaviorSubject < string > = new BehaviorSubject < string > ('');

  @ViewChild('searchInput') searchInput: ElementRef;

  constructor(private provider: ExampleService) {
    this.init();
  }

  ngOnDestroy() {
    this.todoSub$.unsubscribe();
  }

  search() {
    const value = this.searchInput.nativeElement.value;
    this.todo$.next(value);
    this.useFakeURL = !this.useFakeURL;
  }

  private init(): void {
    this.todoSub$ = this.todo$.pipe(
        filter(val => !!val),
        tap(() => {
          this.loading = true;
        }),
        switchMap(() => this.provider.query(this.todo$.getValue(), this.useFakeURL)),
        catchError(error => {
          this.todo$.next('');
          this.init();
          return of([]);
        }),
      )
      .subscribe(
        todos => {
          this.loading = false;
          this.todos = todos;
        },
        err => {
          this.loading = false;
          this.todos = err;
        }
      );
  }
}

export class ExampleService {

  constructor(private http: HttpClient) {}

  query(todo, useFakeURL: boolean) {
    if (todo === 'all') {
      todo = '';
    }
    const url = useFakeURL ? 'poop' : `https://jsonplaceholder.typicode.com/todos/${todo}`;
    return this.http.get(url);
  }
}

  
  


  
    
      {{todo | json}}
{{todos |}} JSON... ЗАГРУЗКА

Ответы [ 2 ]

0 голосов
/ 26 апреля 2019

Как упоминал @kos, я ловил ошибку не в том месте.Поскольку я переключился на новую наблюдаемую, я должен поймать ошибку внутри switchMap. ОБНОВЛЕНО-ДЕМО 

search(term: Observable < string > ) {
  return term.pipe(
    filter(val => !!val),
    distinctUntilChanged(),
    debounceTime(500),
    // attached catchError to the inner observable here.
    switchMap(term => this.searchTodo(term).pipe(catchError(() => {
      return of({
        error: 'no todo found'
      });
    }))),
  );
}
0 голосов
/ 27 марта 2019

Http-запросы Angular неизменны.Observable возвращается от клиента выполнить фактический вызов, когда вы подписываетесь на него.Сколько раз вы подписываетесь, столько запросов будет сделано.Это так называемая «холодная наблюдаемая»

Если вам нужно изменить запрос, вам нужна новая наблюдаемая от HttpClient.

...