angular - 来自 http 请求的 ionic2- 响应显示为未定义

Question

我创建了一个具有许多功能的提供程序，每个功能都向 API 服务器执行 HTTP 请求。我在创建提供程序后更新了 app.module.ts。

我正在尝试将从 api 服务获得的数据返回到注入(inject)此提供程序的页面。

这是我的提供商:

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';

@Injectable()
export class LoginServicesProvider {
  apiUrl: string = 'API URL COMES HERE';
  constructor(public http: Http) {
  }

  login(reqData) {
    this.http.post(apiUrl+'/checkLogin', reqData).map(res => res.json()).subscribe(data => {
      return data;
    });
  }

}

这是这个提供者被注入(inject)的地方:

import { LoginServicesProvider } from './../../providers/login-services/login-services';
import { Http } from '@angular/http';
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';

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

  loginServiceData: Observable<any>;
  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private http: Http,
    private loginService: LoginServicesProvider
    ) 
    {  
        let userName: string = 'dumy_user_name';
        let userPassword: string = '12345';
        let data = {
            username: userName,
            password: userPassword,
        };

        this.loginServiceData = this.loginService.login(data);
        console.log(this.loginServiceData);      
    }
}

当我运行该项目时，生成了 http，但当我对它进行 console.log() 时，它变得未定义。 API 正在返回一个对象。

谁能告诉我我犯了什么错误。

ionic info 返回:

cli packages: (C:\Users\Demo\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : not installed

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.2.3 browser 5.0.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.12.0
    npm               : 5.6.0
    OS                : Windows 10 

Answer 1

API 调用是异步的，但您正在尝试同步调用

在您的服务中您不需要订阅，只需返回 Observable并订阅它在组件文件中

服务文件:

login(reqData) {
    return this.http.post(apiUrl+'/checkLogin', reqData).map(res => res.json())
}

组件文件:

this.loginService.login(data).subscribe((data: any) => {
    this.loginServiceData = data;
    console.log(this.loginServiceData);      
})

现在您将能够在控制台中看到正确的对象。