Thêm nhiều Trình chặn HTTP vào Ứng dụng Góc

Question

Làm cách nào để thêm nhiều bộ chặn HTTP độc lập vào ứng dụng Angular 4?

Tôi đã cố thêm chúng bằng cách mở rộng mảng providers với nhiều thiết bị chặn. Nhưng chỉ cái cuối cùng mới được thực thi, Interceptor1 bị bỏ qua.

@NgModule({ 
    declarations: [ /* ... */ ], 
    imports: [ /* ... */ HttpModule ], 
    providers: [ 
    { 
     provide: Http, 
     useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) => 
     new Interceptor1(xhrBackend, requestOptions), 
     deps: [XHRBackend, RequestOptions], 
    }, 
    { 
     provide: Http, 
     useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) => 
     new Interceptor2(xhrBackend, requestOptions), 
     deps: [XHRBackend, RequestOptions] 
    }, 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

Tôi rõ ràng có thể kết hợp chúng thành một lớp duy nhất Interceptor và điều đó sẽ hoạt động. Tuy nhiên, tôi muốn tránh điều đó vì các bộ chặn này có các mục đích hoàn toàn khác nhau (một để xử lý lỗi, một để hiển thị một chỉ báo tải).

Vậy làm cách nào tôi có thể thêm nhiều thiết bị chặn?

Answer 1

Http không cho phép có nhiều triển khai tùy chỉnh. Nhưng vì @estus đã đề cập đến nhóm Angular đã thêm một dịch vụ mới HttpClient gần đây (bản phát hành 4.3) hỗ trợ nhiều khái niệm đánh chặn. Bạn không cần gia hạn HttpClient như bạn đã làm với số Http cũ. Bạn có thể cung cấp một thực hiện cho HTTP_INTERCEPTORS thay vì đó có thể là một mảng với các tùy chọn 'multi: true':

import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http'; 
... 

@NgModule({ 
    ... 
    imports: [ 
    ... , 
    HttpClientModule 
    ], 
    providers: [ 
    ... , 
    { 
     provide: HTTP_INTERCEPTORS, 
     useClass: InterceptorOne, 
     multi: true, 
    }, 
    { 
     provide: HTTP_INTERCEPTORS, 
     useClass: InterceptorTwo, 
     multi: true, 
    } 
    ], 
    ... 
}) 

đánh chặn:

import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http'; 
... 

@Injectable() 
export class InterceptorOne implements HttpInterceptor { 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    console.log('InterceptorOne is working'); 
    return next.handle(req); 
    } 
} 

@Injectable() 
export class InterceptorTwo implements HttpInterceptor { 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    console.log('InterceptorTwo is working'); 
    return next.handle(req); 
    } 
} 

gọi Máy chủ này sẽ in thông điệp log cả chặn:

import {HttpClient} from '@angular/common/http'; 
... 

@Component({ ... }) 
export class SomeComponent implements OnInit { 

    constructor(private http: HttpClient) {} 

    ngOnInit(): void { 
    this.http.get('http://some_url').subscribe(); 
    } 
}