Question

所以，我目前正在研究Ionic 2来制作混合应用程序。我正在学习关于Udemy的课程，但关于对WEB API的HTTP请求的课程内容已经过时（它来自离子2 Beta）。这是一个很长的问题，但是你们中有些人在Ionic 2框架上经验丰富，可以跳到第8步以节省一些时间。非常感谢你们！

我尝试从此网址检索数据：

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

https：//之后有空格，因为stackoverflow不会让我发布多个链接。 但我错过了将这些数据保存在我创建的变量上的东西。

我在这一点上所做的是：

1）我使用CLI离子生成器生成了我称为ConnectionService的提供程序。

ionic g provider ConnectionService

2）在ConnectionService Provider中创建了一个名为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;
  }
}

P.S。：在这里，您可以看到我在请求的两个步骤中的登录：第一个是在我将其转换为Promise之前的响应，因此我可以将其返回到页面。第二个是在使用toPromise（）方法将其转换为Promise之后。

3）在我的视图中，我有一个按钮，其中有（click）指令调用方法buscarCEP（）

<ion-header>

  <ion-navbar>
    <ion-title>Teste</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <button (click)="buscarCep()">Request CEP</button>

</ion-content>

4.1）我的TypeScript文件已导入ConnectionService Provider并将其命名为ConnectionService。

4.2）我在＆＃34;提供者下面的@Component指令中声明了ConnectionService：＆＃34;标签

4.3）我创建了一个Connection Provider的实例，我在构造函数的声明中调用conServ。我还创建了一个名为CEP的变量来存储我从中提取的数据。

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

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（）方法执行时的数据，可能的错误称为“错误”。在它结束时，我之前创建的变量CEP并将数据值保存到。

7）当我运行应用程序并单击按钮时，我会使用console.logs获得以下屏幕：

带有Chrome控制台剪辑的离子页面图片

8）如您所见，我的日志返回如下： 8.1）＆＃34; Hello ConnectionService Provider＆＃34;来自提供程序构造函数中的console.log，因此提供程序的导入很好并且正在实例化。 8.2）＆＃34;响应：[对象对象]＆＃34;来自提供程序本身的getCEP（）方法内的第一个console.log（）。 8.3）＆＃34; RespondePromise：[object Object]＆＃34;是在我将响应转换为Promise之后，来自提供者本身的getCEP（）方法内的第二个console.log（）。 8.4）＆＃34; CEP：未定义＆＃34;来自buscarCEP（）方法内的console.log，在我点击Request CEP按钮后调用 8.5）＆＃34; DATA：响应状态：200 OK，URL：https://viacep.com.br/ws/01001000/json/＆＃34;来自buscarCEP（）方法中的console.log（）。

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

我知道这是一个很长的问题，但我想把所有的牌都放在棋盘上并尽可能彻底地解释所有内容，因为我对这个框架不熟悉。

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

Answer 1

Response object 存储在this.CEP中。问题是console.log(this.CEP)在之前被称为在then内返回HTTP请求的响应.Devises是异步的。您可以通过在console.log(this.CEP)内执行then来检查内容?。因此，如果您要在html端打印数据，请使用安全导航操作符{{CEP?.property}}。例如：this.CEP = data.json();。

您的代码有几个问题：

您应该从响应对象中提取json数据。我建议你这样做： console.log(JSON.stringify(data,null,2))

如果要打印对象的内容，可以尝试[[inputs.logparser]] files = ["/here/is/the/directory/logname.log"] from_beginning = false。

无法使用IONIC 2生成的提供程序

1 个答案: