グローバルにヘッダーとタイムアウトリクエストを追加します

Question

リクエストのエラーが401（unauthorized）であるかどうかを確認するためのインターセプタサービスを実行して、ログインの表示と非表示の両方でログインページに移動します。 しかし、リクエストごとにヘッダーを追加するのではなく、このサービス（インターセプターサービス）でヘッダーをグローバルに追加する必要があります。 秒リクエストが応答30秒を返さなかった場合は、さらにタイムアウト（30000）を追加する必要があります。 私はそれが働いたすべてのリクエストに対して手動で試しましたが、グローバルにロードを設定するので、hideLoaddingの問題に直面しました。 インターセプター・サービスコード：アプリのコンポーネントで

export class HttpInterceptor extends Http { 
    public loaderService: LoaderService 

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

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

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


    getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs { 
    if (options == null) { 
     options = new RequestOptions(); 
    } 
    if (options.headers == null) { 
     options.headers = new Headers(); 
    } 

    options.headers.append('Content-Type', 'application/json'); 
    return options; 
    } 

    intercept(observable: Observable<Response>): Observable<Response> { 
    this.events.publish('showLoader'); 
    return observable 
     .catch(
     (err) => { 
      if (err.status == 401) { 
      this.events.publish('unAuthorizedRequest', err); 
      this.events.publish('hideLoader'); 
      return Observable.empty(); 
      } else { 
      this.events.publish('hideLoader'); 
      return Observable.throw(err); 

      } 
     }) 
     .do(
     () => { 
      this.events.publish('hideLoader'); 
      return Observable.empty(); 
     }, 
     () => { 
      this.events.publish('hideLoader'); 
      return Observable.empty(); 
     } 
    ); 
    } 
} 

：

this.events.subscribe('unAuthorizedRequest', (err) => { 
     if (!_.endsWith(err.url, '/token')) { 
     this.nav.setRoot(LoginPage); 
     } 
    }); 

    this.events.subscribe('showLoader',() => { 
     this.numberOfLoading = this.numberOfLoading + 1; 
     if(this.numberOfLoading === 1){ 
     this.loader = this.loaderService.presentLoading(); 
     } 

    }); 

    this.events.subscribe('hideLoader',() => { 
     if(this.numberOfLoading === 1){ 
     this.loader.dismiss(); 
     this.numberOfLoading = 0; 
     } 
     if(this.numberOfLoading > 0){ 
     this.numberOfLoading = this.numberOfLoading - 1; 
     } 

    }); 

Answer 1

グローバルタイムアウトを処理するために、あなたはあなたの観察可能な、このように直接timeoutオペレータを活用することができます

intercept(observable: Observable<Response>): Observable<Response> { 
    this.events.publish('showLoader'); 
    return observable 
    .timeout(2000, new Error('delay exceeded')) // <------- 
    .catch(...); 
} 

ヘッダーをグローバルに追加する場合は、getRequestOptionArgsメソッドを活用できます。

詳細はこちらの記事を参照してください。

• http://restlet.com/company/blog/2016/04/18/interacting-efficiently-with-a-restful-service-with-angular2-and-rxjs-part-3/