在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))
})
}
}
进行请求了。
