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

Question

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

供应商：

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}

谁能看出它有什么问题？

Answer 1

在您的登录页面上，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);
}

如果您在登录后正在寻找另一个异步操作，请考虑使用Observable SwitchMap将操作切换到另一个可观察量然后订阅，因此您的 this.stuff 变量可以由另一个异步操作使用。