Angular2 http jsonp的实例详解

编程学习 2021-07-04 18:33www.dzhlxh.cn编程入门
这篇文章主要介绍了Angular2 http jsonp的实例详解的相关资料,希望通过本能帮助到大家,需要的朋友可以参考下

Angular2 Http

1. 使用Http

绝大部分应用程序都会和后台服务打交道,Http是浏览器和服务器之间通讯的主要协议,通过Http调用来访问远程服务器上相应的 Web API。

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方法来执行http get方法获取数据,该方法的调用形式如下

get(url: string, options?: RequestOptionsArgs) : Observable<Response> 

来看一个简单的例子,代码如下

@Component({ 

selector: 'demo', 

template: '<button id="input" (click)="click()">Get Data</button>', 

}) 

export class DemoComponent { 

constructor(private http: 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方法来执行http post方法获取数据,该方法的调用形式如下

post(url: string, body: any, options?: RequestOptionsArgs) : Observable<Response> 

来看一个简单的例子,代码如下

@Component({ 

selector: 'demo', 

template: '<button id="input" (click)="click()">Get Data</button>', 

}) 

export class DemoComponent { 

constructor(private http: Http) { 

} 

url: string = '/api/post'; 

click() { 

let headers = new Headers({ 'Content-Type': 'application/json' }); 

let options = new RequestOptions({ 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获取数据

用 Angular Http 服务发起 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<Response> 

我们来看一个例子,该示例和Http Get访问十分类似,

@Component({ 

selector: 'demo', 

template: '<button id="input" (click)="click()">Get Data</button>', 

}) 

export class DemoComponent { 

constructor(private jsonp: Jsonp) { 

} 

url: string = '/api/list'; 

click() { 

this.jsonp.get(this.url).subscribe((data) => { 

console.log(data); 

}); 

} 

} 

5. 结果处理

5.1 可观察对象

我们通过Http以及Jsonp的api接口可以知道,默认返回值都是可观察对象 Observable< Response >。可以把可观察对象 Observable 看做一个由某些“源”发布的事件流。 通过 订阅 到可观察对象 Observable ,我们监听(subscribe)这个流中的事件。 在这些订阅中,我们指定了当 Web 请求生成了一个成功事件 ( 有效载荷是英雄数据 ) 或失败事件 ( 有效载荷是错误对象 ) 时该如何采取行动,如示例中所示。

我们的服务可以返回 HTTP 响应对象Response。但这可不是一个好主意! 数据服务的重点在于,对消费者隐藏与服务器交互的细节。其实上,我们最关心的还是获取到的返回数据信息,这时候我们就可以利用RxJS库来对事件流进行一些额外的处理。

RxJS("Reactive Extensions" 的缩写)是一个被 Angular 认可的第三方库,它实现了异步可观察对象 (asynchronous observable) 模式。Rxjs库中包含很多对事件流进行处理的方法,例如map,distinctUntilChanged等操作符。

针对返回数据是json格式的响应对象,可以把Response解析成 JavaScript 对象——只要调一下 response.json() 就可以了,这时候我们就可以利用map操作符来进行处理,例如

this.jsonp.get(this.url) 

.map((rsp:Response)=>{ 

return rsp.json() 

}) 

.subscribe((data) => { 

console.log(data); 

}); 

5.2 Promise

虽然 Angular 的 http 客户端 API 返回的是 Observable<Response> 类型的对象,但我们也可以把它转成 Promise<Response>。这很容易,只需要调用可观察对象 Observable< Response >的方法toPromise()就能够进行转化。例如

this.jsonp.get(this.url) 

.toPromise() 

.then((rsp: Response) => { 

console.log(rsp) 

});


以上就是对Angular http json的讲解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板