检测任何http请求的开始和angular2中所有请求的结束

Question

是否有可能检测到任何 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" && 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 && 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);
            }
        });
    }

}

Answer 1

在 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]
        }
    ]
})

注意提供者部分。如果由于 angular 2 DI 机制注入“Http”，则该模块下的每个模块都将获得 httpWrapper 的实例。