使用Http模块的帮助函数

Question

我想做一个简单的帮助函数，它使用Http模块发送请求。

export function serverLog(input) { 
    http.post('server-log', input); 
} 

但我不知道如何注入Http作为依赖。

Answer 1

我会创建一个扩展Http的HTTP拦截：

import { Http, Request, RequestOptionsArgs, Response, XHRBackend, RequestOptions, ConnectionBackend, Headers } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/finally'; 
import 'rxjs/add/observable/timer'; 

export class HttpService extends Http { 


    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) { 
     super(backend, defaultOptions); 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.request(url, options)); 
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.get(url, options)); 
    } 

    post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.post(url, body, options)); 
    } 

    put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.put(url, body, options)); 
    } 

    delete(url: string, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.delete(url, options)); 
    } 


    intercept(observable: Observable<Response>): Observable<Response> { 
     return observable 

      .finally(() => { 
       serverLog(...) <-- log here 
      }); 
    } 
} 

将其导入到你的模块是这样的：

@NgModule({ 
    imports: [ 
     BrowserModule, 
     HttpModule 
    ], 
    declarations: [AppComponent, LoadingComponent], 
    providers: [ 
     { 
      provide: Http, 
      useFactory: (backend: XHRBackend, options: RequestOptions) => { 
       return new HttpService(backend, options); 
      }, 
      deps: [XHRBackend, RequestOptions] 
     } 
    ], 
    bootstrap: [AppComponent], 
}) 
export class AppModule { }