Ionic 2 HTTP Provider第一次返回undefined，但第二次返回正确的数据 [英] Ionic 2 HTTP Provider returning undefined the first time, but the correct data the second time

问题描述

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

I have created an Ionic 2 provider that gets sends login information to the server and then returns the data correctly. The problem is, that on the first click of the button that activates the provider and sends everything to the server, the first return is undefined, while the second click returns the correct data.

提供商：

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文件：

TS File of the Page with the Button:

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)
  }
}

一些示例输入和输出将是：

Some example input and output would be:

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}

有人能看出它有什么问题吗？

Can anyone see what is wrong with it?

推荐答案

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

On you Login Page the stuff variable is undefined because its declared as any and your async operation is not complete yet.

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变量就可以被另一个异步操作使用。

if you're looking for another async operation after login considering using Observable SwitchMap to switch the operation to another observable and then subscribe, so your this.stuff variable can be used by another async operation.

这篇关于Ionic 2 HTTP Provider第一次返回undefined，但第二次返回正确的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！