Javascript 离子2等待多个响应

我的应用程序登录页面有一些问题。我是爱奥尼亚2和Angular的新手，我曾试图在谷歌的帮助下解决这个问题，但至今没有成功

这里的这些行导致了问题，警报在我单击登录按钮时返回“未定义”，甚至认为应该等待响应

let accessToken = this.getAccessToken();
let details     = this.getProfileDetails(accessToken);
alert(JSON.stringify(details));

全部代码：

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { FbProvider } from '../../providers/fb-provider';
import { TabsPage } from '../tabs/tabs';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {

  platform
  fb
  email
  name
  id

  constructor(public navCtrl: NavController, pf: Platform, fbProvider: FbProvider, public http: Http) {
    this.platform = pf;
    this.fb = fbProvider;
    this.email = '';
    this.name = '';
    this.id = '';
  }

  ionViewDidLoad() {
    console.log('Hello LoginPage Page');
  }

  fbLogin() {
    let accessToken = this.getAccessToken();
    let details     = this.getProfileDetails(accessToken);
    alert(JSON.stringify(details));
  }

  getAccessToken(){
    this.fb.login().then((fbLoginData) => {
      let params = new FormData();
      params.append('facebookAccessToken', fbLoginData.authResponse.accessToken);
      this.http.post('http://myHostUrl/api/accessToken', params).map(res => res.json())
      .subscribe(
        data => {
          return data.accessToken;
        },err => {
          alert(err);
        }
      );
    },(err) => {
      alert('Facebook login failed');
    });
  }

  getProfileDetails(accessToken){
    let params = new FormData();
    params.append('accessToken', accessToken);
    this.http.post('http://myHostUrl/api/userDetails', params).map(res => res.json())
    .subscribe(
      data => {
        return data;
      },err => {
        alert(err);
      }
    );
  }

}

---

它是未定义的，因为您需要等待异步函数完成。下面的代码使用rxjs来管理这两个函数和http调用的异步。试试看

  fbLogin() {
    this.getAccessToken()
      .switchMap(accessToken => this.getProfileDetails(accessToken))
      .first() // Just one and complete ....
      .subscribe(
        details => alert(JSON.stringify(details)),
        error => alert(error)
      );
  }

  getAccessToken() : Observable<any> {

    return Observable.fromPromise(<Promise<any>> this.fb.login())
      .map(fbLoginData => fbLoginData.authResponse.accessToken)
      .switchMap(accessToken => {
        let params = new FormData();
        params.append('facebookAccessToken', accessToken);
        return this.http.post('http://myHostUrl/api/accessToken', params)
          .map(res => res.json())
          .map(data => data.accessToken)
      });

  }

  getProfileDetails(accessToken) : Observable<any>{

    let params = new FormData();
    params.append('accessToken', accessToken);
    return this.http.post('http://myHostUrl/api/userDetails', params).map(res => res.json());

  }

fbLogin（）{
this.getAccessToken（）
.switchMap（accessToken=>this.getProfileDetails（accessToken））
.first（）//只需一个并完成。。。。
.订阅(
详细信息=>alert（JSON.stringify（详细信息）），
错误=>警报（错误）
);
}
getAccessToken（）：可观察{
返回Observable.fromPromise（this.fb.login（））
.map（fbLoginData=>fbLoginData.authResponse.accessToken）
.switchMap（accessToken=>{
设params=new FormData（）；
params.append（'facebookAccessToken'，accessToken'）；
返回此.http.post（'http://myHostUrl/api/accessToken，参数）
.map（res=>res.json（））
.map（数据=>data.accessToken）
});
}
getProfileDetails（accessToken）：可观察{
设params=new FormData（）；
参数append（'accessToken'，accessToken）；
返回此.http.post（'http://myHostUrl/api/userDetailsmap（res=>res.json（））；
}

甚至认为它应该等待响应

-解释为什么代码应该等待异步操作（

let details=this.getProfileDetails（accessToken）；

）完成，然后再继续下一行代码事实上

let accessToken=this.getAccessToken（）

也是一个不返回值的异步函数，因此

let details=this.getProfileDetails（accessToken）中的accessToken也将是未定义的