Question

您好我正在尝试做一个简单的Http GET请求，但无法让它在离子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添加到构造函数时 - ＆gt;构造函数（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（）（单击）但它会返回这些例外：

EXCEPTION：评估“点击”时出错

ORIGINAL EXCEPTION：TypeError：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

请试试这个

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

我建议您在单独的服务中编写get请求并将其注入您的页面。

另请看一下 - http://tphangout.com/?p=113

在那里提供了详细而简单的说明，用于从Ionic 2应用程序发出简单的GET请求。

Answer 2

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

请参阅Angular2 docs

Ionic 2 HTTP请求无效 - Angular 2

2 个答案: