角2（離子型2）：攔截Ajax請求

Question

具有角1.x中可以攔截與像一些代碼，所有Ajax請求：

$httpProvider.interceptors.push('interceptRequests'); 
... 
var app_services = angular.module('app.services', []); 
    app_services.factory('interceptRequests', [function() { 
    var authInterceptorServiceFactory = {}; 
    var _request = function (config) { 
    //do something here 
    }; 
    var _responseError = function (rejection) { 
    //do something here 
    } 
    authInterceptorServiceFactory.request = _request; 
    authInterceptorServiceFactory.responseError = _responseError; 
    return authInterceptorServiceFactory; 
}]); 

有什麼相似（或外的開箱）在Angular 2中？

Answer 1

的一種方法可能是延長HTTP對象攔截來電：

@Injectable() 
export class CustomHttp extends Http { 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    console.log('request...'); 
    return super.request(url, options).catch(res => { 
     // do something 
    });   
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    console.log('get...'); 
    return super.get(url, options).catch(res => { 
     // do something 
    }); 
    } 
} 

並將其註冊，如下所述：

bootstrap(AppComponent, [HTTP_PROVIDERS, 
    new Provider(Http, { 
     useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions), 
     deps: [XHRBackend, RequestOptions] 
    }) 
]); 

您可以利用例如catch操作者捕獲錯誤和在全球範圍內處理它們...

看到這個plunkr：https://plnkr.co/edit/ukcJRuZ7QKlV73jiUDd1?p=preview。

Answer 2

查看有關ionic2攔截此鏈接：http://roblouie.com/article/354/http-interceptor-in-angular-2/

1 - 覆蓋的Http標準類

import {Injectable} from "@angular/core"; 
import {Http, RequestOptionsArgs, ConnectionBackend, RequestOptions} from "@angular/http"; 
import {Observable} from "rxjs/Observable"; 
import {Request} from "@angular/http/src/static_request" 
import {Response} from "@angular/http/src/static_response" 

@Injectable() 
export class CustomHttpInterceptor extends Http { 

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

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    console.log('My new request...'); 
    return super.request(url, options); 
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    console.log('My new get...'); 
    return super.get(url, options); 
    } 

    post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> { 
    console.log('My new post...'); 
    return super.post(url, body, options); 
    } 

} 

2 - 註冊商

export function providers() { 
    return [ 
    Api, 
    Items, 
    User, 
    Camera, 
    GoogleMaps, 
    SplashScreen, 
    StatusBar, 

    { provide: Settings, useFactory: provideSettings, deps: [Storage] }, 
    // Keep this to enable Ionic's runtime error handling during development 
    { provide: ErrorHandler, useClass: IonicErrorHandler }, 
    { 
     provide: Http, 
     useFactory: (backend:XHRBackend, defaultOptions:RequestOptions) => { 
     return new CustomHttpInterceptor(backend, defaultOptions); 
     }, 
     deps: [XHRBackend, RequestOptions] 
    } 

    ]; 
} 

@NgModule({ 
    declarations: declarations(), 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    TranslateModule.forRoot({ 
     loader: { 
     provide: TranslateLoader, 
     useFactory: HttpLoaderFactory, 
     deps: [Http] 
     } 
    }), 
    IonicModule.forRoot(MyApp), 
    IonicStorageModule.forRoot() 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: entryComponents(), 
    providers: providers() 
}) 
export class AppModule { } 

3 - 而只使用Http類，因爲Custom H ttp攔截器實例是自動注入的。

import { Page1 } from '../pages/page1/page1'; 
import { Page2 } from '../pages/page2/page2'; 

import { Http } from '@angular/http'; 

@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyAppComponent { 
    @ViewChild('content') nav : Nav; 

    root: any = Page1; 

    constructor(public platform: Platform, private http: Http) { 
    this.initializeApp(); 

    http.get('https://google.com'); 
    } 
...