คำขอ Ionic 2 HTTP ไม่ทำงาน - Angular 2

สวัสดี ฉันกำลังพยายามส่งคำขอ 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 ให้กับ Constructor -> Constructor(http:Http) แอปทั้งหมดจะว่างเปล่าในเบราว์เซอร์... และฉันได้รับข้อผิดพลาดใน Console:

ข้อผิดพลาด: ไม่พบโมดูล "../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');
        });
    }
}

จากนั้นเรียก makeGetRequest() บน (คลิก) ใน page1.html แต่จะส่งคืนข้อยกเว้นเหล่านี้:

ข้อยกเว้น: เกิดข้อผิดพลาดระหว่างการประเมิน "คลิก"

ข้อยกเว้นดั้งเดิม: 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');
        });
    }
}

แอพ 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(() => {

    });
  }
}

person Christer    schedule 02.03.2016    source แหล่งที่มา


คำตอบ (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()));
        });
    }
}

ฉันอยากจะแนะนำให้คุณเขียนคำขอ get ภายในบริการแยกต่างหากและแทรกลงในเพจของคุณ

ดูสิ่งนี้ด้วย - http://tphangout.com/?p=113

มีคำแนะนำโดยละเอียดและเรียบง่ายสำหรับการส่งคำขอ GET แบบง่ายจากแอป Ionic 2

person Raja Yogan    schedule 02.03.2016

ฉันเชื่อว่าคุณต้อง import { HTTP_PROVIDERS } from 'angular2/http'; ใน app.js ของคุณแทนที่จะเป็น HTTP_BINDINGS และเปลี่ยน providers: [HTTP_BINDINGS] เป็น providers: [HTTP_PROVIDERS]

ดูเอกสาร Angular2

person jboothe    schedule 02.03.2016
comment
ยังคงได้รับข้อผิดพลาด: ข้อยกเว้นดั้งเดิม: TypeError: this.http ไม่ได้กำหนดไว้ - person Christer; 03.03.2016
comment
ลองทำให้ http เป็นแบบส่วนตัว: constructor(private http:Http) {... - person jboothe; 03.03.2016
comment
คุณได้ดึง <script src="../node_modules/angular2/bundles/http.dev.js"></script> ในหน้าดัชนีของคุณหรือไม่ - person jboothe; 03.03.2016