Angular2 http jsonp的实例详解


Posted in Javascript onAugust 31, 2017

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的讲解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
原生js 秒表实现代码
Jul 24 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
jquery+json实现分页效果
Mar 07 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 #Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 #Javascript
基于canvas粒子系统的构建详解
Aug 31 #Javascript
Vue 组件间的样式冲突污染
Aug 31 #Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 #Javascript
JavaScript基础之流程控制语句的用法
Aug 31 #Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 #jQuery
You might like
PHPMailer 中文使用说明小结
2010/01/22 PHP
php验证码实现代码(3种)
2015/09/07 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
Angular工具方法学习
2016/12/26 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
Python第三方库的安装方法总结
2016/06/06 Python
python实现批量监控网站
2016/09/09 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
PHP数据运算类型都有哪些
2013/11/05 面试题
初三物理教学反思
2014/01/21 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
招股说明书范本
2014/05/06 职场文书
英语系本科生求职信
2014/07/15 职场文书
信仰心得体会
2014/09/05 职场文书
2014年协会工作总结
2014/11/22 职场文书
英语感谢信范文
2015/01/20 职场文书
明确岗位职责
2015/02/14 职场文书
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python