检测任何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

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

注意提供者部分。这个模块下面的每个模块都会得到一个httpWrapper的实例，如果他们通过角度2 DI机制注入'Http'的话。