Ionic 2 HTTP 请求无效 - Angular 2

Question

您好，我正在尝试做一个简单的 Http GET 请求，但无法让它在 ionic v2 Beta 中工作...

这是我的 app.js:

import {App, Platform} from 'ionic-angular';
import {TabsPage} from './pages/tabs/tabs';
import {HTTP_BINDINGS} from 'angular2/http';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  providers: [HTTP_BINDINGS],
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {

    });
  }
}

这是我的 page1.js:

import {Page} from 'ionic-angular';
import {Http} from 'angular2/http';


@Page({
  templateUrl: 'build/pages/page1/page1.html'
})

export class Page1 {
    constructor(http:Http) {

        this.mget = http.get("https://httpbin.org/ip")
        .subscribe(data => {
            var alert = Alert.create({
                title: "Your IP Address",
                subTitle: data.json().origin,
                buttons: ["close"]
            });
            this.nav.present(alert);
        }, error => {
            console.log(JSON.stringify(error.json()));
        });
    }
}

将 http:Http 添加到构造函数 -> 构造函数 (http:Http) 时，整个应用程序在浏览器中变为空白... 我在控制台中收到错误消息：

错误：找不到模块“../page1/page1”

我也在 Page1.js 中尝试过：

export class Page1 {
    constructor() {

    }

    makeGetRequest() {
        this.http.get("https://httpbin.org/ip")
        .subscribe(data => {
            var alert = Alert.create({
                title: "Your IP Address",
                subTitle: data.json().origin,
                buttons: ["close"]
            });
            this.nav.present(alert);
        }, error => {
            console.log(JSON.stringify(error.json()));
            console.log('yolo')
            alert('hello');
        });
    }
}

然后在 page1.html 中（单击）调用 makeGetRequest() 但它 returns 这些例外情况：

异常：计算 "click"

时出错

原始异常：类型错误：this.http 未定义

请帮忙！ :)

-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-

这就是 解决方案：

page1.js:

import {Page} from 'ionic-angular';
import {Http} from 'angular2/http';

@Page({
  templateUrl: 'build/pages/page1/page1.html'
})

export class Page1 {
     static get parameters(){
       return [Http];
       }
    constructor(http) {
        this.http = http;

        this.mget = this.http.get("https://httpbin.org/ip")
        .subscribe(data => {
            console.log(data);
        }, error => {
            console.log('faild');
        });
    }
}

app.js:

import {App, Platform} from 'ionic-angular';
import {TabsPage} from './pages/tabs/tabs';
import { HTTP_PROVIDERS } from 'angular2/http';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  providers: [HTTP_PROVIDERS],
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {

    });
  }
}

Answer 1

我相信你需要 import { HTTP_PROVIDERS } from 'angular2/http'; 在您的 app.js 而不是 HTTP_BINDINGS 并将 providers: [HTTP_BINDINGS] 更改为 providers: [HTTP_PROVIDERS]

见Angular2 docs

Answer 2

请试试这个

export class Page1 {
     static get parameters(){
       return [Http];
       }
    constructor(http) {
        this.http = http;
        this.mget = this.http.get("https://httpbin.org/ip")
        .subscribe(data => {
            var alert = Alert.create({
                title: "Your IP Address",
                subTitle: data.json().origin,
                buttons: ["close"]
            });
            this.nav.present(alert);
        }, error => {
            console.log(JSON.stringify(error.json()));
        });
    }
}

我建议您将获取请求写在一个单独的服务中，然后将其注入您的页面。

也看看这个 - http://tphangout.com/?p=113

那里给出了从 Ionic 2 应用发出简单 GET 请求的详细和简单的说明。

Ionic 2 HTTP 请求无效 - Angular 2

Ionic 2 HTTP request not working - Angular 2

ionic-framework

ionic2

angular