angular - Ionic 2 HTTP Provider 第一次返回未定义，但第二次返回正确的数据

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 将操作切换到另一个 observable，然后订阅，这样您的 this.stuff 变量可以被另一个异步操作使用。