Как отловить успешный запрос, используя перехватчик httpClient? - PullRequest
0 голосов
/ 18 ноября 2018

Большинство учебников по перехватчику httpClient перехватывает ответ об ошибках, чтобы показать предупреждение.

Примеры:

https://ionicacademy.com/ionic-http-interceptor/

https://medium.com/@deniscangemi/intercept-http-requests-in-angular-c6392b7b0e0

Можно ли представить загрузчик для каждого HTTP-запроса, используя перехватчик?

Если да, как обработать или перехватить успешный HTTP-запрос, чтобы закрыть загрузчик.

Ответы [ 2 ]

0 голосов
/ 18 ноября 2018

Я написал простой сервис, который позволяет мне включать / отключать загрузчики по всему моему приложению.Вам просто нужно указать уникальное имя для вызова API:

import { Injectable } from "@angular/core";

@Injectable({
    providedIn: "root"
})
export class WatcherService {
    private watchers = new Map<String, Boolean>();

    public isLoading(watcher: String): Boolean {
        return this.watchers.get(watcher) || false;
    }

    public start(watcher: String) {
        this.watchers.set(watcher, true);
    }

    public stop(watcher: String) {
        this.watchers.set(watcher, false);
    }
}

Ключом может быть, например, URL-адрес конечной точки API.Вы можете вставить наблюдатель в перехватчик.

Таким образом, вы можете отображать загрузчики где угодно, не беспокоясь о передаче флагов / событий между многими слоями компонентов, просто чтобы показать загрузчик.

Например,, У меня есть список в моей заявке.Я могу получить новые элементы для перечисления из многих мест (фильтры, панель поиска или после прокрутки пользователем вниз).Мне не нужно подключать все компоненты к моему списку, чтобы отобразить загрузчик, я просто должен позвонить:

watcher.start('actionName')

и листинг знает, что на нем должен отображаться загрузчик:

<qlisting [loading]="watcher.isLoading(getUnitsActionName)">

0 голосов
/ 18 ноября 2018

Вы также можете добавить tap функцию внутри конвейера, которая будет выполняться для каждого запуска, например:

            import { tap, catchError } from 'rxjs/operators';

            // ...

            return next.handle(clonedReq).pipe(
                tap(data => {
                  // Do your success stuff in here
                }),
                catchError(error => {
                  // Do your error handling in here
                })
            );
...