Как добавить preloader к каждому запросу http (angular2)?

Question

В моем приложении angular2 я хочу показать предварительный загрузчик (блокирующий экран) каждый раз при запуске запроса http и скрыть его после завершения запроса. Метод subscribe позволяет нам обнаружить, когда запрос успешный, имеет ошибки или завершается. Я думаю, что это плохая идея написать код preloader каждый раз, когда я вызываю метод подписки на запрос.

1. Как определить, что запрос начинается/заканчивается (за исключением метода подписки)?
2. Каков хороший способ добавить preloader к каждому запросу?

Answer 1

Вы можете сделать это 2 способами

1. Создать DataService и завернуть Http, который будет использоваться для вызова API, поставить прелоадер логику в обслуживании.

2. вы можете использовать Interceptor, вот example here и here

Я предпочитаю вариант 1, который является более расширяемой, вы можете контролировать все звонки с одного места.

Answer 2

Я бы расширить Http класс, как показано ниже, и добавить сервис, содержащий наблюдаемым/при условии уведомления, когда запрос HTTP выполняется

export class CustomHttp extends Http { 
    constructor(backend: ConnectionBackend, 
     defaultOptions: RequestOptions, 
     private _notifierService:NotifierService) { 
    super(backend, defaultOptions); 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    this._notifierService.notifyBeforeRequest(); 
    return super.request(url, options); 
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    this._notifierService.notifyBeforeRequest(); 
    return super.get(url, options); 
    } 

    (...) 
} 

зарегистрировать его, как описано ниже:

bootstrap(AppComponent, [HTTP_PROVIDERS, 
    { 
     provide: Http, 
     useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, notifyService:NotifierService) => { 
     return new CustomHttp(backend, defaultOptions, notifyService); 
     }, 
     deps: [XHRBackend, RequestOptions, NotifierService] 
    } 
]); 

Сервисный инструмент может быть примерно таким:

export class NotifierService { 
    notifier:Subject<any> = new Subject(); 

    notifyBeforeRequest() { 
    notifier.next(); 
    } 
} 

Вы можете получить уведомление таким образом:

@Component({ 
    (...) 
}) 
export class SomeComponent { 
    constructor(private notifyService:NotifierService) { 
    this.notifyService.notifier.subscribe(() => { 
     // do something 
    }); 
    } 

}