2017-06-24 63 views
1

我已經擴展HTTP服務和覆蓋方法如如何在請求中提供Angular 2中的自定義RequestOptionsArgs?

request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> 

在該請求方法我有一個裝載機,我展示和當請求的開始和在請求結束隱藏。

request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> { 
    this.loadingService.start(); 

    if (!options) { 
     options = {}; 
     options.headers = new Headers(); 
    } 
    this.updateHeaders(options.headers); 
    if (typeof url !== 'string') { 
     this.updateHeaders(url.headers); 
    } 

    return super.request(url, options) 
     .catch((response: Response) => this.authError(response)) 
     .finally(() => { 
      this.loadingService.done(); 
     }); 
} 

loadingService啓動和停止加載指示器。但我不希望此加載指示符顯示在所有請求上。我想要一些請求不顯示加載器。我怎樣才能做到這一點?

的RequestOptionArgs是一個接口

export interface RequestOptionsArgs { 
    url?: string; 
    method?: string | RequestMethod; 
    search?: string | URLSearchParams; 
    headers?: Headers; 
    body?: any; 
    withCredentials?: boolean; 
    responseType?: ResponseContentType; 
} 

但我可能不應該使用這些變量作爲告知是否要顯示加載指示器的方式。

我該怎麼辦?

回答

1

在服務中編寫使用http服務的http請求,不需要覆蓋原始服務。

然後創建兩個方法,一個用於loadingService和另一個非loadingService

requestWithLoading(url: string|Request, options?: RequestOptionsArgs): Observable<Response> { 
    this.loadingService.start(); 

    if (!options) { 
     options = {}; 
     options.headers = new Headers(); 
    } 
    this.updateHeaders(options.headers); 
    if (typeof url !== 'string') { 
     this.updateHeaders(url.headers); 
    } 

    return http.request(url, options) 
     .catch((response: Response) => this.authError(response)) 
     .finally(() => { 
      this.loadingService.done(); 
     }); 
} 

requestNonLoading(url: string|Request, options?: RequestOptionsArgs): Observable<Response> { 

    if (!options) { 
     options = {}; 
     options.headers = new Headers(); 
    } 
    this.updateHeaders(options.headers); 
    if (typeof url !== 'string') { 
     this.updateHeaders(url.headers); 
    } 

    return http.request(url, options) 
     .catch((response: Response) => this.authError(response)) 
     .finally(() => {}); 
} 
+0

包裝原始Http服務而不擴展可能是最好的方法,謝謝。 – Alex

0

1.Solution:this.loadingService.start();移動到組件。

2.解決方案:否則設置一個peram isLoading :boolean = true服務。在此基礎上

request(url: string|Request, options?: RequestOptionsArgs, isLoading:boolean = true): Observable<Response> { 
    if(isLoading){ 
    this.loadingService.start(); 
    } 


    if (!options) { 
     options = {}; 
     options.headers = new Headers(); 
    } 
    this.updateHeaders(options.headers); 
    if (typeof url !== 'string') { 
     this.updateHeaders(url.headers); 
    } 

    return super.request(url, options) 
     .catch((response: Response) => this.authError(response)) 
     .finally(() => { 
      this.loadingService.done(); 
     }); 
} 

設置默認值更多。