javascript - 嵌套 Observables 在 Ionic2/Angular2 应用程序中表现不同

Question

我正在创建一个 ionic 登录模块，其中有 2 个可观察值，1 个在另一个内部，不确定这是否是正确的实现方式，

这里我尝试调用 getHTTP() 方法，获取一个字符串，如果字符串不为空则将其设置到 ionic-storage 变量中，然后在登录之前进行验证

由于 Observables 是异步的 - getHTTP() 在登录(凭据)流程后完成，请帮助我

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';
import {Headers} from '@angular/http';
import {  Response } from '@angular/http';
import { Storage } from '@ionic/storage';


export class User {
  name: string;
  password: string;
  url: string;

  constructor(name: string, password: string, url: string) {
    this.name = name;
    this.password = password;
    this.url = url;
  }
}


/*
  Generated class for the AuthService provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class AuthService {

  currentUser: User;
  data = '';

  constructor(public http: Http,private storage: Storage) {
    console.log('Hello AuthService Provider');
  }



  // Make a call to Get CSRF and check if we have access
  public getHTTP(credentials) {
        let responseCSRF ;
        const headers: Headers = new Headers();
        headers.append('Authorization', 'Basic ' + btoa(credentials.user + ':' + credentials.password));
        headers.append('Content-Type', 'application/json');
        console.log(headers);
        console.log('Clearing cache');
        this.storage.set('CSRF', '');
        this.storage.set('Auth',btoa(credentials.user + ':' + credentials.password));
        this.storage.set('url', credentials.url);
        //return
        responseCSRF = this.http.get('http://' + credentials.url +'/Windchill/servlet/rest/security/csrf', {
          headers: headers
        }).map((response: Response) =>  response.json());
        //console.log(typeof(responseCSRF))
        responseCSRF.subscribe(x => {
          console.log('CSRF ->' + x.items[0].attributes.nonce)
          this.data = x.items[0].attributes.nonce;
          if(typeof this.data!='undefined' && this.data) {
            this.storage.set('CSRF', this.data);
          }
        });
        return responseCSRF;
      }


  public login(credentials) {
       if (credentials.user === null || credentials.password === null || credentials.url === null ) {
         return Observable.throw("Please insert credentials ");
       } else {

        return Observable.create(observer => {
          // At this point make a request to your backend to make a real check!
          let access = false;
          this.getHTTP(credentials).subscribe (
          (resBody) => console.log('Boby is '+resBody),
          error => console.error('Error from auth-service: ' + error))
           ,  () => console.log('Completed!' + 'Auth' );

           this.storage.get('CSRF').then((val) => {
               console.log('Your CSRF is'+ val);
               if(val!='undefined') {
                 access = true;
               }
             });

          observer.next(access);
          observer.complete();
         });
       }
  }

public getUserInfo() : User {
  return this.currentUser;
}

public logout() {
  return Observable.create(observer => {
    this.currentUser = null;
    observer.next(true);
    observer.complete();
  });
}

}

在控制台中

Headers {_headers: Map(2), _normalizedNames: Map(2)}
auth-service.ts:49 Clearing cache
auth-service.ts:57 pluck -->[object Object]
auth-service.ts:83 Your CSRF is
auth-service.ts:59 CSRF ->RkPYp+UtGGMRB+8NJHCr9rJ6WhBHdIVCfim585xXKgZ1TKUmf3v39tBqVRkjSb93dgWi4oF3KF4rNts0c3frktUdIFokNNVrMSGM47V3KwQhP8A5ARKr5rBsaxtmOtI=
auth-service.ts:78 Boby is [object Object]

Answer 1

尝试将您的 storage.get 逻辑放入订阅处理程序中:

        return Observable.create(observer => {
            // At this point make a request to your backend to make a real check!
            let access = false;
            this.getHTTP(credentials).subscribe(
                (resBody) => {
                    console.log('Boby is ' + resBody);
                    this.storage.get('CSRF').then((val) => {
                        console.log('Your CSRF is' + val);
                        if (val != 'undefined') {
                            access = true;
                        }

                        observer.next(access);
                        observer.complete();
                    });
                },
                error => console.error('Error from auth-service: ' + error),
                () => console.log('Completed!' + 'Auth'));
        });