Как прослушать HTTP-ответ и применить preloader?

Question

Я использую HTTP-библиотеку для выполнения запроса к серверу в моем SPA следующим образом:

public get(cls: number): Observable<any[]> {

    const data = {

    };

    return this.http.post(null, data)
      .map(result => {
        return result.json().result;
      })
      .catch(this.handleErrorObservable);
  }

Предположим, у нас есть служба предварительного загрузчика, которая запускается, когда запрос уходит и останавливается, когда приходит ответ.

Как привязать этот сервис к HTTP?Точно, я могу подписаться на ответ Наблюдателя как:

preloader.start();
get(1).subscribe(data => {}, error => {
   preloader.stop();
});

Но это не подходит для меня, я хочу сделать это более универсальным и более абстрактным

Answer 1

Вы можете использовать библиотеку ng-http-loader , чтобы установить ее:

$ npm install ng-http-loader --save / yarn add ng-http-loader

Этот пакет содержит HTTP-перехватчик и некоторые компоненты счетчика.HTTP-перехватчик прослушивает все HTTP-запросы и показывает индикатор вращения / загрузки во время ожидающих запросов http.

использование:

From your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
[...]
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http'; <============
import { NgHttpLoaderModule } from 'ng-http-loader'; <============

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule, <============ (Perform http requests with this module)
    NgHttpLoaderModule, <============
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

В вашем app.component.html просто добавьте:

<ng-http-loader></ng-http-loader>

Вот полная документация: https://github.com/mpalourdio/ng-http-loader