Json 无法使用IONIC 2生成的提供程序从RESTFUL API接收数据

所以，我目前正在研究离子2来制造混合应用。我正在学习一门关于Udemy的课程，但是课程中关于对webapi的HTTP请求的内容已经过时了（它来自离子2测试版）。这是一个很长的问题，但你们中一些对Ionic 2框架更有经验的人可以跳过步骤8来节省一些时间。谢谢大家

我正在尝试从此URL检索数据：

https://viacep.com.br/ws/01001000/json/

它在https://后面有一个空格，因为stackoverflow不会分配我发布多个链接。 但是我缺少一些东西来将这些数据保存在我创建的变量上

我对这一点所做的是：

1） 我使用CLI ionic generator生成了名为ConnectionService的提供程序

ionic g provider ConnectionService

2） 在ConnectionService提供程序内创建了一个名为getCEP（）的方法，该方法发出一个HTTP GET请求

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

/*
  Generated class for the ConnectionService provider.

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

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

  getCep(): Promise<Response>{
      let response: any = this.http.get("https://viacep.com.br/ws/01001000/json/");
      console.log("Response: " + response);
      let responsePromise: any = response.toPromise();
      console.log("ResponsePromise: " + responsePromise);
      return responsePromise;
  }
}

6） 然后，我修改方法buscarCEP（），以便它获取该conServe实例并调用getCEP（）方法，该方法向上述URL发出HTTP请求

buscarCep(): void{
    this.conServ.getCep().then(data =>{
      console.log("DATA:" + data);
      this.CEP = data;
    }).catch(err => {
      console.log("ERRO: " + err);
    });
    console.log("CEP: " + this.CEP);
  }

PS：如您所见，我在请求中记录了三个步骤：getCEP（）方法执行时的数据，一个可能的错误称为“err”，最后是我之前创建并将数据值保存到的变量CEP。

7） 当我运行应用程序并单击按钮时，我会看到以下带有console.logs的屏幕：

带有Chrome控制台剪子的ionic页面图像

8） 如您所见，我的日志返回如下： 8.1）“Hello ConnectionService Provider”来自提供程序的构造函数中的console.log，因此提供程序的导入很好，并且正在实例化。 8.2）“Response:[object]”来自提供程序本身的getCEP（）方法中的第一个console.log（）。 8.3）“RespondePromise:[object object]”来自提供程序本身的getCEP（）方法中的第二个console.log（），在我对承诺进行了响应后。 8.4）“CEP:undefined”来自buscarCEP（）方法中的console.log，在我单击requestcep按钮后调用该方法 8.5）“数据：URL:”的状态为200 OK的响应来自buscarCEP（）方法中的console.log（）

9） 因此，我认为getCEP（）方法能够连接到URL，这就是为什么响应和响应promise日志会附加一个对象的原因。数据日志还告诉我，我收到了来自服务器的OK响应。我的问题是关于CEP：未定义日志。我似乎无法将该对象存储在我创建的变量中

我知道这是一个很长的问题，但我想把所有的问题都摆在桌面上，尽可能彻底地解释一切，因为我对这个框架还不熟悉

---

感谢您的帮助，谢谢您的时间

响应对象存储在

this.CEP

中。问题是

console.log（this.CEP）

在

then

内返回HTTP请求的响应之前被调用。承诺是异步的。您可以通过在

then

内执行

console.log（this.CEP）

来检查内容。 因此，如果要在html端打印数据，请使用安全导航操作符

？

。e、 g:

{{CEP？.property}

您的代码有几个问题：

您应该从响应对象中提取json数据。我建议你：

this.CEP=data.json（）

如果要打印对象的内容，可以尝试

console.log（JSON.stringify（data，null，2））

---

哦，好的，明白了，这也是为什么数据：200 ok的日志会出现在后面。我现在就试试，非常感谢

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ConnectionService } from '../../providers/connection-service';

/*
  Generated class for the MenuTest page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-menu-test',
  templateUrl: 'menu-test.html',
  providers: [ConnectionService]
})
export class MenuTestPage {
  public CEP: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public conServ: ConnectionService) {
  }

buscarCep(): void{
    this.conServ.getCep().then(data =>{
      console.log("DATA:" + data);
      this.CEP = data;
    }).catch(err => {
      console.log("ERRO: " + err);
    });
    console.log("CEP: " + this.CEP);
  }