角2は複数の非同期メソッドを呼び出します

Question

私はビルド中のモバイルアプリケーションを持っていますし、今は認証に取り組んでいます。ホームページにアクセスする前に、ユーザーにデータを表示する前に、作成したAPIのさまざまなエンドポイントをヒットする必要があります。

郵便配達でテストした場合、すべてのエンドポイントが正しいデータを返していますが、私のアプリケーションでは2番目の非同期コールでnullという値が得られます。

私はそれがこれらの呼び出しが行われる順序と関係があると確信していますので、私はちょうど1つの呼び出しが別の呼び出しを開始する前に終了するのを適切に待つ方法についていくつかの助けを探していました。

public login() { 

this.showLoading(); 

this.userService.getUserIdFromUserName(this.registerCredentials.username) // WORKS 
    .subscribe(
    res => { 
     console.log(res); 
     localStorage.setItem("UserId", res.toString()); 
    }, 
    err => { 
     console.log(err); 
    }); 

this.userService.getEmployeeIdFromUserId(localStorage.getItem("UserId")) // THIS RETURNS NULL 
    .subscribe(
    res => { 
     console.log(res); 
     localStorage.setItem("EmployeeId", res.toString()); 
    }, 
    err => { 
     console.log(err); 
    }); 

this.authService.login(this.registerCredentials) 
    .subscribe(

    data => { 
     this.loading.dismissAll(); 
     console.log('User logged in successfully! ', data); 
     this.nav.push(TabsPage); 
     localStorage.setItem("Username", this.registerCredentials.username); 
     localStorage.setItem("isLoggedIn", "true"); 
    }, 

    error => { 
     this.loading.dismissAll(); 
     this.showAlert("Uh oh!", "Something went wrong. Please re-enter your login credentials or check your connection."); 
     console.log(error); 
    }); 
    } 

Answer 1

忘れwork.Don't必要があります。

A) this.userService.getUserIdFromUserName(this.registerCredentials.username) // WORKS 

B) this.userService.getEmployeeIdFromUserId(localStorage.getItem("UserId")) // THIS RETURNS NULL 

C) this.authService.login(this.registerCredentials) 

あなたがRXJSについて理解する必要がどのような

が必要なすべての情報を表して観察可能冷たい（の差です：あなたは3つの、私がAを呼び出しますあなたのコード内のコール）、B）、およびC）を持っていますstart非同期操作）とhot Observable（非同期操作でObservableであり、すでにが開始されました。）です。

A）、B）、C）の3つの呼び出しは、単に.subscribe()と呼ぶ瞬間に開始されるコールドオブザーバブルを作成するだけです。 B）が構築されるまでに、A）はすでに開始されていますが、まだ完了していません。したがって、localStorage.getItem("UserId")の呼び出しは、A）がまだそのサブスクライバのnextコールバックを呼び出していないため、nullを返します。

あなたがしたいことは、B）がA）を待つことです。また、グローバル状態（localStorage）に何かを詰め込むのではなく、A）からB）に結果を流す方がよいでしょう。 .mergeMap()オペレータ入力します。

this.userService.getUserIdFromUserName(this.registerCredentials.username) // WORKS 
    .map(res => res.toString()) 
    .do(userId => localStorage.setItem("UserId", userId)) // cleanly separate side-effects into .do() calls 
    .mergeMap(userId => this.userService.getEmployeeIdFromUserId(userId)) 
    .map(res => res.toString()) 
    .do(employeeId => localStorage.setItem("EmployeeId", employeeId)) 
    .subscribe(
    employeeId => { 
     console.log(employeeId);  
    }, 
    err => { 
     console.log(err); 
    }); 

をrxjsのいいところは、エラーハンドリングは自分の観察可能なチェーンを介してすべての道を動作することです。 SwitchMap vs MergeMap in the #ngrx example

Answer 2

これはあなたの元のコードは、このエラーにつながるバグがありimport 'rxjs/Rx'

this.userService.getUserIdFromUserName(this.registerCredentials.username) 
    .map(res => res.toString()) 
    .do(userId => { 
     console.log(res); 
     localStorage.setItem("UserId", userId); 
    }) 
    .flatMap(userId => { 
     return this.userService.getEmployeeIdFromUserId(userId); 
    }) 
    .do(res => { 
     console.log(res); 
     localStorage.setItem("EmployeeId", res.toString()); 
    })