2016-08-24 251 views
1

我有一个同步操作在RxJS observables订阅链的某处运行。同步操作问题RxJS observables订阅

这个同步操作设置了为了执行http调用(异步/可观察)而需要进一步向下链的本地存储(同步)数据。

下面是该序列的摘要:

  1. 异步操作返回一个可观察到的所谓
  2. 同步操作设置在本地存储器上的数据
  3. 使用本地存储的日期和返回一个可观察到的
  4. 异步操作最终认购

当时3.被调用,看起来数据在本地存储上不可用 - 应该已经设置为2.

以上只是对问题的简化。

以下是完整的代码(在打字稿):从SessionService

resetPassword(passwordResetForm) { 
    return this.http.put(this.urls.USER_ACCOUNT.RESET_PASSWORD, passwordResetForm); 
    } 

这是通过一个形式(位于一个组件)称为:

resetPassword() { 
    this.submitted = true; 
    if (this.passwordResetForm.valid) { 
     this.route.params.map(params => params['userAccountToken']) 
     .switchMap(userAccountToken => { 
      return Observable.concat(
      this.userAccountService.resetPassword(Object.assign(this.passwordResetForm.value.passwordReset, {token: userAccountToken})), 
      this.sessionService.signinByUserAccountToken(userAccountToken) 
     ); 
     }) 
     //Will require the UserAccountResolve below which will itself fail because 'x-auth-token' is not yet available on local storage 
     .subscribe(() => this.router.navigate(['/dashboard'])); 
    } 
    } 

从UserAccountService :

signinByUserAccountToken(userAccountToken: string) { 
    return this.http.post(format(this.urls.AUTHENTICATION.SIGNIN_BY_USER_ACCOUNT_TOKEN, {userAccountToken}), null) 
     .do(response => this.setPersonalInfo(response.headers.get('x-auth-token'))); 
    } 

    private setPersonalInfo(sessionToken) { 
    localStorage.setItem('authenticated', 'true'); 
    localStorage.setItem('sessionToken', sessionToken); 
    this.authenticated$.next(true); 
    } 

UserAccountResolve:

import {Injectable} from '@angular/core'; 
import {Resolve, ActivatedRouteSnapshot} from '@angular/router'; 
import {UserAccount} from '../shared/models/useraccount.model'; 
import {AuthenticatedHttpClient} from '../shared/services/authenticated-http-client.service'; 
import {URLS} from '../urls/URLS'; 

@Injectable() 
export class UserAccountResolve implements Resolve<UserAccount> { 

    private urls; 

    constructor(private authenticatedHttpClient: AuthenticatedHttpClient) { 
    this.urls = URLS; 
    } 

    resolve(route: ActivatedRouteSnapshot) { 
    //Will fail 
    return this.authenticatedHttpClient.get(this.urls.USER_ACCOUNT.USER_ACCOUNT) 
     .map(response => response.json()); 
    } 

} 

AuthenticatedHttpClient:

@Injectable() 
export class AuthenticatedHttpClient { 

    static createAuthorizationHeader(headers: Headers) { 
    //Is not available on local storage when required 
    headers.append('x-auth-token', localStorage.getItem('sessionToken')); 
    } 

    constructor(private http: Http) { 
    } 


    get(url) { 
    let headers = new Headers(); 
    AuthenticatedHttpClient.createAuthorizationHeader(headers); 
    return this.http.get(url, { 
     headers: headers 
    }); 
    } 
    ... 

是否有人可以帮忙吗?

回答

0

如果我正确理解你的问题,你想延迟重定向你的用户,直到两个HTTP请求完成。目前,您订阅了Observable,一旦它观察到第一个结果(在本例中为userAccountService.resetPassword()的结果),就会立即发生重定向。

如果你只是想等待所有请求完成,你可以订阅onCompleted这样的:

observable.subscribe(
    _ => {}, 
    err => { /* Don't forget to handle errors */ }, 
    () => this.router.navigate(['/dashboard'])) 

但是有一个可观察其结果,你不关心是一个标志,你的应用程序可能需要这些日子之一是重构。