脚本宝典收集整理的这篇文章主要介绍了ng2服务封装http，jsonp获取后台数据的方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
1、定义服务
import {Injectable} From "@Angular/core";
import {Http, Jsonp} from "@angular/http";
import "RxJS/add/operator/map";
@Injectable()
export class HttpServer {
constructor(public jsonp: Jsonp, public http: Http) {
}
/*
* url: 服务器api接口地址
* params: 传递参数对象
*/
// get方法
httpGet(url, params) {
return this.http.get(url, {search: params}).map(res=>res.json);
}
// post方法
httpPost(url, params) {
return this.http.post(url, {search: params}).map(res=>res.json);
}
// 跨域请求
jsonpGet(url, params) {
return this.jsonp.get(url, {search: params}).map(res=>res.json());
}
}
2、app.module.ts文件中引入服务
import {HttpServer} from "./http.server.ts";
...
PRoviders: [HttpServer]
...3、组件中使用服务获取数据
...
import {URLSearchParams} from "@angular/http";
...
// 使用服务
// 设置参数
VAR params = new URLSearchParams();
params.set("callback", "JSONP_CALLBACK");
// 调用jsonpGet方法，跨域请求数据
httpServer.jsonpGet("http://localhost:3000/users", params).subscribe(res=> {
console.log(res);
});注意
1. 服务需要在constructor(public httpServer: HttpServer)参数中初始化, this.httpServer.httpGet()
2. 服务有两种引入方式，如果在全局引入，那么组件中还要引入文件路径，不用写，providers:[]以上是脚本宝典为你收集整理的ng2服务封装http，jsonp获取后台数据的方法全部内容，希望文章能够帮你解决ng2服务封装http，jsonp获取后台数据的方法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。