Angular Ionic 2 HTTP提供程序第一次返回未定义的数据，但第二次返回正确的数据

我创建了一个Ionic 2提供程序，它获取登录信息并将其发送到服务器，然后正确返回数据。问题是，在第一次单击激活提供程序并将所有内容发送到服务器的按钮时，第一次返回的是

未定义的

，而第二次单击返回的是正确的数据

提供者：

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the HttpProvider provider.

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

  constructor(public http: Http) {
    console.log('Hello HttpProvider Provider');
  }

  get() {

  }

  post() {

  }

  login(username, password, url) {
    let headers = new Headers();

    headers.append("Content-Type", "application/json");

    return this.http.post(url,
      {"username": username,
      "password": password,
    }, {headers: headers})
    .map(res => res.json());
  }
}

带按钮的页面的TS文件：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import "rxjs/add/operator/map";
import { HttpProvider } from '../../providers/http-provider'

/**
 * Generated class for the LoginPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-login-page',
  templateUrl: 'login-page.html',
})
export class LoginPage {
  username:any;
  password:any;
  stuff:any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private http: HttpProvider) {
  }

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

  login() {
    this.http.login(this.username, this.password, WORKING_IP_ADDRESS).subscribe(stuff => this.stuff = JSON.stringify(stuff));

    console.log(this.stuff)
  }
}

一些输入和输出示例如下：

input:
  username: bob
  password: bob

output on first click:
  undefined

output on second click where the login is successful:
 {"id":"t326t34ergfsdy5u54terg324t37u567uygt5243y756u467u756y","ttl":54325432,"created":"2017-05-10T02:19:05.423Z","userId":63546543}

---

有人看到它有什么问题吗？

在您的登录页面上，stuff变量未定义，因为它声明为any，并且您的异步操作尚未完成

login() {
   this.http.login(this.username,this.password,WORKING_IP_ADDRESS)
   .subscribe((stuff) => {
      //Async operation complete
      this.stuff = JSON.stringify(stuff);

      //this is the correct result from async operation
      console.log("complete",this.stuff);

      //do your stuff with this.stuff variable here

   });

   // on the firstime button clicked Async operation is not complete yet 
   so the code outside callback will log undefined
   // the second time its fired the code below will log the first async result
   console.log("not complete", this.stuff);
}

---

如果您在登录后正在寻找另一个异步操作，请考虑使用ObservableSwitchMap将操作切换到另一个Observable，然后订阅，这样您的this.stuff变量就可以被另一个异步操作使用。

您可能正在使用一个provider@Component（{selector:'page login page'，providers:[HttpProvider]templateUrl:'login page.html'，}）这可能是我一直在寻找的重复项，谢谢！我需要执行console.log以使其工作，并使其异步。有没有办法声明

stuff

变量，让它自动等待正确的响应？（stuff）Observable Subscribe或Observable SwitchMap回调中的变量将始终等待并从异步操作返回正确的数据如果操作成功，有时也可能失败，因此您需要处理错误。Angular使用RxJs Observable简化异步操作并生成异步操作序列。如果您希望等待esult在执行任何代码之前，请确保将其放在回调内。在回调外的代码不会等待异步操作完成。