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 解析多维的Json数据格式
Nov 02 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 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
类的另类用法--数据的封装
2006/10/09 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
js字符串转成JSON
2013/11/07 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
python计算N天之后日期的方法
2015/03/31 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
基于python操作ES实例详解
2019/11/16 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
几款好用的python工具库(小结)
2020/10/20 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
管理专员自荐信
2014/01/26 职场文书
教师节活动总结
2014/08/29 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
小学英语听课心得体会
2016/01/14 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python