Angular2 http jsonp的实例详解
Angular2Http
1.使用Http
绝大部分应用程序都会和后台服务打交道，Http是浏览器和服务器之间通讯的主要协议，通过Http调用来访问远程服务器上相应的WebAPI。
HttpModule并不是Angular的核心模块，通过Angular包中一个名叫@angular/http的独立附属模块发布了出来。我们的应用将会依赖于Angular的http服务，它本身又依赖于其它支持类服务。来自@angular/http库中的HttpModule保存着这些HTTP相关服务提供商的全集。
现代浏览器支持两种基Http的API：XMLHttpRequest(XHR)和JSONP。少数浏览器还支持Fetch。在Angular中分别对应@angular/http库中的HttpModule和JsonpModule两个模块。
2.GET获取数据
为了能够使用XHR中的Get方法来获取数据信息，我们把HttpModule添加到AppModule的imports列表中，这样本应用程序的任何地方都可以访问XHR服务。
我们使用Http服务的实例中的get方法来执行httpget方法获取数据，该方法的调用形式如下
get(url:string,options?:RequestOptionsArgs):Observable
来看一个简单的例子，代码如下
@Component({
selector:'demo',
template:'GetData',
})
exportclassDemoComponent{
constructor(privatehttp:Http){
}
url:string='/api/list';
click(){
this.http.get(this.url).subscribe(function(data){
console.log(data)
})
}
}
我们在DemoComponent构造函数中采用DI获取了Http服务的实例http，当点击获取数据的按钮后，便能够通过Http实例中的get方法，根据其参数url地址及options?:RequestOptionsArgs参数来获取对应的数据信息。该方法返回的是一个可观察对象(Observable)，针对可观察对象，我们可以subscribe对应的方法，当数据返回后进行处理。
3.POST发送数据
同样的，为了能够使用XHR中的POST方法来获取数据信息，我们把HttpModule添加到AppModule的imports列表中，这样本应用程序的任何地方都可以访问XHR服务。
我们使用Http服务的实例中的post方法来执行httppost方法获取数据，该方法的调用形式如下
post(url:string,body:any,options?:RequestOptionsArgs):Observable
来看一个简单的例子，代码如下
@Component({
selector:'demo',
template:'GetData',
})
exportclassDemoComponent{
constructor(privatehttp:Http){
}
url:string='/api/post';
click(){
letheaders=newHeaders({'Content-Type':'application/json'});
letoptions=newRequestOptions({headers:headers});
this.http.post(this.url,JSON.stringify({'id':'1'}),options).subscribe(function(data){
console.log(data)
})
}
}
我们在DemoComponent构造函数中采用DI获取了Http服务的实例http，当点击获取数据的按钮后，便能够通过Http实例中的get方法，根据其参数url地址,body:any及options?:RequestOptionsArgs参数来提交对应的数据信息，其中body表示传递到服务器端的数据信息。示例中，我们传递json格式的数据到服务器端，所以使用了'Content-Type':'application/json'头信息进行包装。
该方法返回的是一个可观察对象(Observable)，针对可观察对象，我们可以subscribe对应的方法，当数据返回后进行处理。
4.JSONP获取数据
用AngularHttp服务发起XMLHttpRequests，是与服务器通讯时最常用的方法。但它不适合所有场景。
出于安全的考虑，网络浏览器会阻止调用与当前页面不“同源”的远端服务器的XHR。所谓源就是URI的协议(scheme)、主机名(host)和端口号(port)这几部分的组合。这被称为同源策略。
为了可以向不同源的服务器发起XHR请求，这时候就需要支持一种老的、只读的(译注：即仅支持GET)备选协议，这就是JSONP。
为了能够使用JSONP中的Get方法来获取数据信息，我们把JsonpModule添加到AppModule的imports列表中，这样本应用程序的任何地方都可以访问Jsonp服务。
Angular的Jsonp服务不但通过JSONP扩展了Http服务，而且限制我们只能用GET请求，调用的形式如下。
get(url:string,options?:RequestOptionsArgs):Observable
我们来看一个例子，该示例和HttpGet访问十分类似，
@Component({
selector:'demo',
template:'GetData',
})
exportclassDemoComponent{
constructor(privatejsonp:Jsonp){
}
url:string='/api/list';
click(){
this.jsonp.get(this.url).subscribe((data)=>{
console.log(data);
});
}
}
5.结果处理
5.1可观察对象
我们通过Http以及Jsonp的api接口可以知道，默认返回值都是可观察对象Observable
我们的服务可以返回HTTP响应对象Response。但这可不是一个好主意！数据服务的重点在于，对消费者隐藏与服务器交互的细节。其实上，我们最关心的还是获取到的返回数据信息，这时候我们就可以利用RxJS库来对事件流进行一些额外的处理。
RxJS("ReactiveExtensions"的缩写)是一个被Angular认可的第三方库，它实现了异步可观察对象(asynchronousobservable)模式。Rxjs库中包含很多对事件流进行处理的方法，例如map，distinctUntilChanged等操作符。
针对返回数据是json格式的响应对象，可以把Response解析成JavaScript对象——只要调一下response.json()就可以了，这时候我们就可以利用map操作符来进行处理，例如
this.jsonp.get(this.url)
.map((rsp:Response)=>{
returnrsp.json()
})
.subscribe((data)=>{
console.log(data);
});
5.2Promise
虽然Angular的http客户端API返回的是Observable
this.jsonp.get(this.url)
.toPromise()
.then((rsp:Response)=>{
console.log(rsp)
});
以上就是对Angularhttpjson的讲解，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！