Ionic2 get和post请求样例

在ionic2的service中使用http请求数据返回一个Promise：
首先在项目路径下执行ionic g provider HomeService，会在项目的中生成一个providers的文件夹，里面会生成一个home-service.ts文件。
然后在你要在使用用service的component中注入HomeService,例如在home.ts中

import {HomeService} from "../../providers/home-service";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers:[HomeService]
})
export class HomePage {

  constructor(
    public navCtrl: NavController, 
    public service:HomeService
    ) {
  }
  }

这样就可以通过注入的service调用HomeService中的方法:

this.service.get().then(data=>{console.log(data)})

在service中我们定义get和post两个方法，在方法里面直接使用new Promise创建承诺，然后调用this.http.get(url,pramas,config)进行请求，在返回的数据中先要将数据转换为json，这步通过map实现，然后后面是两个回掉函数。
注意
在配置header的时候需要引入Headers通过append方法添加头信息。
传入的请求参数如果是一个对象的话就需要通过JSON.stringify()将对象转换为字符串。

—————————最终代码样例—————————————

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

/*
  Generated class for the HomeService provider.

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

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

  get() {
    return new Promise((resolve, reject) => {
      this.http.get(URL)
        .map(res => res.json())
        .subscribe(data => {
          resolve(data);
        }, err => {
          reject(err);
        })
    })
  }

  //这种post方式在php中后台无法获取到数据，我们需要采用另外一种方式
  post() {
    let header = new Headers();
    header.append('Content-Type', 'application/x-www-form-urlencoded');
    let pramas = JSON.stringify({ username: "", password: "" })
    return new Promise((resolve, reject) => {
      this.http.post(URL, pramas, header)
        .map(res => res.json())
        .subscribe(data => resolve(data), err => reject(err))
    })
  }
  //因为上面的请求参数在RequestPayload中，而下面的请求参数在formData中(具体可以看两者的区别)
    post2() {
    let headers = new Headers({
            'Content-Type': 'application/x-www-form-urlencoded'
        });
        let options = new RequestOptions({
            headers: headers
        });
    let body= "username=admin&password=123456";
    return new Promise((resolve, reject) => {
      this.http.post(URL, body, options )
        .map(res => res.json())
        .subscribe(data => resolve(data), err => reject(err))
    })
  }
}

//或者使用以下方法将json进行参数化

   private toQueryString(obj) {
     let result = [];
     for (let key in obj) {
       key = encodeURIComponent(key);
       let values = obj[key];
       if (values && values.constructor == Array) {
         let queryValues = [];
         for (let i = 0, len = values.length, value; i < len; i++) {
           value = values[i];
           queryValues.push(this.toQueryPair(key, value));
         }
         result = result.concat(queryValues);
       } else {
         result.push(this.toQueryPair(key, values));
       }
    }
     return result.join('&');
   }
   private toQueryPair(key, value) {
     if (typeof value == 'undefined') {
       return key;
     }
     return key + '=' + encodeURIComponent(value === null ? '' : String(value));
   }    
 }
这样就可以通过

    post2(data) {
    let headers = new Headers({
            'Content-Type': 'application/x-www-form-urlencoded'
        });
        let options = new RequestOptions({
            headers: headers
        });
    return new Promise((resolve, reject) => {
      this.http.post(URL, this.toQueryString(data), options )
        .map(res => res.json())
        .subscribe(data => resolve(data), err => reject(err))
    })
  }
}
进行请求了。