2017-06-18 20 views
0

私は角度を覚えており、その一部として、私が念頭に置いているユースケースを実装する方法を見ていきたいと考えています。この時点で、私はサーバーの通信をテストしようとしています。すなわち、RxJs Observables。ユーザーのリクエストが送信される前にHTTPリクエストを挿入する方法

私が念頭に置いているユースケースは、サーバー側でX-XSRF-TOKENヘッダーを受け入れることを要求するPOSTリクエストを送信しています。これは、最初にGET要求を送信したときにCookieとしてクライアントに返されるセキュリティヘッダーです。言い換えれば、サーバーとの会話はPOST要求で開始できません。

私は、これが角度のHttpクラスをラップすることにより、ある実装に期待していた方法:

import {Http, RequestOptions, RequestOptionsArgs, Response} from '@angular/http'; 
import { Injectable} from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { CookieService } from 'angular2-cookie/services/cookies.service'; 

@Injectable() 
export class RestClient { 
    private static xsrfTokenCookie: string = 'XSRF-TOKEN'; 
    private static xsrfTokenHeader: string = 'X-XSRF-TOKEN'; 
    private static xsrfToken: string = null; 

    constructor(private http: Http, private cookies: CookieService) {} 

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

    post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> { 
    if (!options) { 
     options = new RequestOptions(new Headers()); 
    } 
    if (!RestClient.xsrfToken) { 
     RestClient.xsrfToken = this.cookies.get(RestClient.xsrfTokenCookie); 
    } 
    if (!RestClient.xsrfToken) { 
     //TODO: Somehow construct an Observable object which once subscribed, it will make a GET request 
     // then using the returned cookie, it will construct the actual POST request. 
    } 
    } 
} 

だから私の質問は、どのように私は最初のGETリクエストを送信したPOSTリクエストを作成することができ、その応答を待つれます実際のPOST要求を送信します。もちろん、postメソッドの呼び出し元が取得する返されたObservableは、POST要求に属し、GET要求には属しません。だから私が書く場合:

restClient.post('/', {}).subcribe(response => { 
    //It's POST's response 
}) 

答えて

1

使用mergeMap:この場合

post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> { 
     if (!options) { 
      options = new RequestOptions(new Headers()); 
     } 
     if (!RestClient.xsrfToken) { 
      RestClient.xsrfToken = this.cookies.get(RestClient.xsrfTokenCookie); 
     } 
     if (!RestClient.xsrfToken) { 
      return this.getToken(...) 
       .mergeMap(token => this.postToServer(...)); 
     } 
     } 
    } 

getTokenトークン値とObservableを返しプライベート方法であってもよいです。 postToServerでも同じですが、返品タイプObservableReponseです。連結可能な最小限の集中化されたメソッドを作成することで、ロジックを断片化し、それらを非公開にすることで実装の詳細を隠すことができます。

+0

'mergeMap'を使用しないと、最後に返されたObservableストリームにトークンが含まれますか?もしそうなら、それは私が好きなものではありません! – Mehran

+0

いいえ、mergeMapはobservableを別のものに変換します。返されるObservableは、postToServer()のものです。 https://www.learnrxjs.io/operators/transformation/mergemap.htmlを確認してください。 –

1

flatMapを使用してください。新しいリクエストがトリガされたときに以前のリクエストを無視したい場合は、switchMapを使用できます。

return get(getUrl,....) 
    .switchMap(response => restClient.post(url, response.token ....) 

これは、コールのObservableを返します。

関連する問題