Блог

есть ли какая-либо возможность определить начало любого http-запроса и время завершения вызовов в angular2? это мой пользовательский http-сервис :

 import {Injectable, Inject} from "@angular/core";
import { Http, Response, Headers, RequestOptions } from "@angular/http";
import { StorageServiceClass } from "../storage.service";
import "rxjs/add/operator/map";
import * as Cookies from "js-cookie";

import { Observable }   from "rxjs/Rx";
import {  Router } from "@angular/router";


@Injectable()
export class HttpClient {

    public storage: StorageServiceClass;

    private http: Http;
    private router: Router;

    constructor(private _http: Http, _router: Router, private _storage: StorageServiceClass) {
        this.http = _http;
        this.router = _router;
        this.storage = _storage;
    }

    public setToken() {
        let token = Cookies.get("authToken");
        if (token !== "undefined" amp;amp; token !== undefined) {
            this.storage.setAuthToken(token);
        }
    }

    public removeStorageAndCookies() {
        Cookies.remove("authToken");
        this.storage.removeAuthToken();
    }

    public createAuthorizationHeader(headers: Headers) {
        let token = this.storage.getAuthToken();
        headers.append("Accept", "application/json");
        headers.append("Content-Type", "application/json");

        if (token !== null amp;amp; token !== undefined) {
            headers.append("Authorization", "JWT "   token);
        }
    }

    public post(url: string, data: any, options?: RequestOptions) {
        let headers = new Headers();
        if (options !== undefined) {
            headers = options.headers;
        }
        this.createAuthorizationHeader(headers);
        let dataResp = this.intercept(this.http.post(url, data, { headers: headers, withCredentials: true }));
        this.setToken();
        return dataResp;
    }


    public put(url: string, data: any, options?: RequestOptions) {
        let headers = new Headers();
        if (options !== undefined) {
            headers = options.headers;
        }
        this.createAuthorizationHeader(headers);
        let dataResp = this.intercept(this.http.put(url, data, { headers: headers, withCredentials: true }));
        this.setToken();
        return dataResp;
    }

    public delete(url: string, options?: RequestOptions) {
        let headers = new Headers();
        if (options !== undefined) {
            headers = options.headers;
        }
        this.createAuthorizationHeader(headers);
        let dataResp = this.intercept(this.http.delete(url, { headers: headers, withCredentials: true }));
        this.setToken();
        return dataResp;
    }


    public get(url: string, data?: any, options?: RequestOptions) {
        let headers = new Headers();
        if (options !== undefined) {
            headers = options.headers;
        }
        this.createAuthorizationHeader(headers);

        let urlParams = "";
        if (data) {
            urlParams = jQuery.param(data);
        }

        let dataResp = this.intercept(this.http.get(url, {
            headers: headers, search: urlParams, withCredentials: true
        }));
        this.setToken();
        return dataResp;
    }

    public intercept(observable: Observable<Response>): Observable<Response> {
        return observable.catch((err, source) => {
            if (err.status === 401) {
                this.removeStorageAndCookies();
                this.router.navigate(["login"]);
                return Observable.empty();
            } else {
                return Observable.throw(err);
            }
        });
    }

}
  

Рекомендуемый способ сделать это в angular 2 — предоставить службу httpwrapper. Это может выглядеть так:

 @Injectable()
export class CustomHttp extends Http {
    private activeCalls: number;
    private store: Store<ApplicationState>;

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, store: Store<ApplicationState>) {
        super(backend, defaultOptions);
        this.store = store;
        this.activeCalls = 0;
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        this.httpCallRequested();

        return super.get(url, options).finally(
            () => {
                this.httpCallReady();
            }
        );
    }
}
  

Это неполный пример. Найдите полный здесь: https://github.com/brechtbilliet/winecellar/blob/master/src/app/customHttp.ts

Этот класс обертывает все http-вызовы и позволяет вам что-то делать до и после выполнения. Чтобы использовать эту оболочку везде вместо обычного HTTP-сервиса, вы должны предоставить этот класс в своем модуле приложения. Это можно сделать следующим образом:

 @NgModule({
    imports: [BrowserModule, AboutModule, AuthenticationModule, CommonLogicModule, StockModule, routing],
    declarations: [ApplicationContainer],
    exports: [ApplicationContainer],
    providers: [
        AppSandbox,
        {
            provide: Http,
            useFactory: customHttpFactory,
            deps: [XHRBackend, RequestOptions, Store]
        }
    ]
})
  

Обратите внимание на часть providers. Каждый модуль под этим модулем получит экземпляр httpWrapper, если они введут «Http» благодаря механизму angular 2 DI.