AngularJS 4 Предварительный загрузчик HttpClient

Управление работой пользователей во время ожидания Http-запроса очень важно в одностраничных приложениях. Поскольку при асинхронных обращениях к серверу в браузере не происходит видимых изменений, пользователи, скорее всего, запутаются и в конечном итоге закроют ваше приложение из-за разочарования.

Я видел несколько статей в Интернете, показывающих, как этого добиться, расширив класс HttpClient. Как бы это ни звучало как хорошее решение, я считаю, что это перебор.

Поэтому я придумал что-то другое, что я делал несколько раз в дни Angular JS 1.x. Напишите простой перехватчик, который может перехватывать все вызовы, сделанные из HttpClient. Затем создайте методы «до» и «после» для обработки отправления и прибытия рейса :-).

Итак, нам нужно создать файл, я назову свой app.interceptor.ts.

/**
 * Created by akin.akindolani on 12/5/17.
 */
import { Injectable } from '@angular/core';
import {
    HttpRequest,
    HttpHandler,
    HttpResponse,
    HttpEvent,
    HttpErrorResponse,
    HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

declare var $:any;

@Injectable()

export class AppInterceptor implements HttpInterceptor {
    constructor() {}
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.showBusyLoader();
        return next.handle(request).do((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
                this.hideBusyLoader();
            }
        }, (error: any) => {
            if (error instanceof HttpErrorResponse) {
                this.hideBusyLoader();
            }
        });
    }

    showBusyLoader() {
        //Show Loader. 
    }

    hideBusyLoader() {
        //Hide Loader
    }
}

Обратите внимание, что $ был объявлен. Это означает, что любители jQuery могут реализовать функции jQuery для плавного появления или исчезновения элемента в зависимости от обстоятельств.

Далее нужно добавить это в наш список поставщиков в app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA } from '@angular/core';


import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppInterceptor } from './app.interceptor';

@NgModule({
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ],
  declarations: [...],
  imports: [...],
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: AppInterceptor,
    multi: true
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

И это все. Запустите свое приложение, чтобы увидеть его в действии.

Наслаждаться!

AngularJS 4 Предварительный загрузчик HttpClient

Похожие вопросы