大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp、URLSearchParams、observable中断选择数据流的用法。
例子
例子的第一个程序,上节课已经讲过了。这节课我们学习第二个程序,从wiki的api中跨域获取数据,可实现300毫秒内中断和选择最近请求等炫酷功能,这些功能都来自于observable!
运行方法:
在http目录或者上级目录起个服务即可:
http-server
没有则需要安装http-server:
sudo npm install http-server -g
源代码:
https://github.com/lewis617/angular2-tutorial/tree/gh-pages/http
demo演示:
http://lewis617.github.io/angular2-tutorial/http/
Jsonp
在讲解observable的api前呢?我们还是把例子的代码给讲解完
app/wiki/wikipedia.service.ts
import {Injectable} from 'angular2/core'; import {Jsonp, URLSearchParams} from 'angular2/http'; @Injectable() export class WikipediaService { constructor(private jsonp: Jsonp) {} search (term: string) { let wikiUrl = 'http://en.wikipedia.org/w/api.php'; var params = new URLSearchParams(); params.set('search', term); // the user's search value params.set('action', 'opensearch'); params.set('format', 'json'); params.set('callback', 'JSONP_CALLBACK'); // TODO: Add error handling return this.jsonp .get(wikiUrl, { search: params }) .map(request => <string[]> request.json()[1]); } }
以上代码我们干了几件事:
- 导入需要的api
- 写一个使用Injectable装饰的类(服务)
- 在构造函数中注入Jsonp服务
- 编写search成员函数实现获取数据的功能
这个jsonp服务从何而来?来自import {JSONP_PROVIDERS} from 'angular2/http';,我们将其注入在组件中:
app/wiki/wiki.component.ts和app/wiki/wiki-smart.component.ts
providers:[JSONP_PROVIDERS, WikipediaService]
这样组件中的服务就可以用了!
URLSearchParams
然后我们发现我们从
import {Jsonp, URLSearchParams} from 'angular2/http';
http中引入了另一个api,URLSearchParams。
这是什么?用来干嘛?qs大家一定非常熟悉,就是url后面那个?和&。我们的程序也可以这样写:
let queryString = `?search=${term}&action=opensearch&format=json&callback=JSONP_CALLBACK` return this.jsonp .get(wikiUrl + queryString) .map(request => <string[]> request.json()[1]);
URLSearchParams,可以将qs写成对象,通过调用对象的方法来获取设置其参数,然后给ng2用!像这样需要对象嵌套对象的时候,URLSearchParams就显得非常方便!
简单监听数据流
服务写好了,然后我们在组件中调用服务来请求数据吧!首先来个简单的,即每次输入都会发请求:
app/wiki/wiki.component.ts
items: Observable<string[]>; search (term: string) { this.items = this._wikipediaService.search(term); }
我们在组件的类中定义了一个items,类型是Observable。然后又写了一个成员函数search用于调用服务获取数据。非常简单,输入的数据在term变量中,被源源不断的输入到服务里面,服务通过调用api,源源不断的返回数据流给observable,我们拿到observable后将其传给items这个observable,然后在模板中渲染出来!
app/wiki/wiki.component.ts
<input #term (keyup)="search(term.value)"/> <ul> <li *ngFor="#item of items | async">{{item}}</li> </ul>
async这个过滤器之前已经讲过不再赘述!
中断数据流,选择数据流
让我们来实现更炫酷的功能吧!我们希望不要每个字符输入都请求服务器,我们希望300毫秒以内的字符输入都被中断掉!使用observable就对了,promise可没有这么炫酷的功能!
app/wiki/wiki-smart.component.ts
private _searchTermStream = new Subject<string>(); search(term:string) { this._searchTermStream.next(term); } items:Observable<string[]> = this._searchTermStream .debounceTime(300) .distinctUntilChanged() .switchMap((term:string) => this._wikipediaService.search(term));
我们在上一个简单的程序基础上增加了一个成员变量searchTermStream,是个Subject类型,这是什么鬼?这是官方文档。
简单来说,Subject就是用来创建流的,每次我们输入字符,都可以使用searchTermStream的next方法将字符源源不断的添加到searchTermStream中。
然而这个searchTermStream同时也是observable,我们可以使用debounceTime这个api将数据流的流动频率控制在300毫秒以上,这意味着300毫秒以内输入多次也只能发出一次。
https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/debounce.md
接着我们使用了distinctUntilChanged这个api用于中断没有改变的情况,比如一个用户先输入“angular”,然后不小心输入了“angularrrrr”,接着他立马按回格键,变成了“angular”,两次都是“angular”,没有发生改变,就会被distinctUntilChanged这个api给中断掉!promise可没有中断功能!非常炫酷!
好吧,还有更加炫酷的api。我们甚至可以选择最近的一次数据流。使用switchMap就可以做到,新版本被更换成了flatmaplatest,顾名思义就是选择最后的项,这里指的是最近的请求!
https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md
observable的api太多了,大家需要可以查询,不再一一讲述:
https://github.com/Reactive-Extensions/RxJS/tree/master/doc/api/core/operators
教程源代码及目录
如果您觉得本博客教程帮到了您,就赏颗星吧!
https://github.com/lewis617/angular2-tutorial
angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流的更多相关文章
-
黄聪:Microsoft Enterprise Library 5.0 系列教程(九) Policy Injection Application Block
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(九) Policy Injection Application Block 代理对象(Proxy Object) ...
-
angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用
今天我们要讲的是ng2的路由系统. 例子
-
CRL快速开发框架系列教程九(导入/导出数据)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
-
angular2系列教程(一)hello world
今天我们要讲的是angular2系列教程的第一篇,主要是学习angular2的运行,以及感受angular2的components以及模板语法. 例子 这个例子非常简单,是个双向数据绑定.我使用了官网 ...
-
Unity3D脚本中文系列教程(九)
Unity3D脚本中文系列教程(八) name 对象名称hideFlags 该物体是否被隐藏,保存在场景中或被用户修改继承的函数 GetInstanceID 返回该物体的实例id继承的类函数 oper ...
-
webpack4 系列教程(九): CSS Tree Shaking
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步原文地址 有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料 本次课程的代码目录(如下图所示): >>> ...
-
Influx Sql系列教程九:query数据查询基本篇二
前面一篇介绍了influxdb中基本的查询操作,在结尾处提到了如果我们希望对查询的结果进行分组,排序,分页时,应该怎么操作,接下来我们看一下上面几个场景的支持 在开始本文之前,建议先阅读上篇博文: 1 ...
-
angular2系列教程(八)In-memory web api、HTTP服务、依赖注入、Observable
大家好,今天我们要讲是angular2的http功能模块,这个功能模块的代码不在angular2里面,需要我们另外引入: index.html <script src="lib/htt ...
-
angular2系列教程(十一)路由嵌套、路由生命周期、matrix URL notation
今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:
随机推荐
-
C语言堆栈入门——堆和栈的区别
来看一个网上很流行的经典例子: main.cpp int a = 0; 全局初始化区 char *p1; 全局未初始化区 main() { int b; 栈 char s[] = "abc& ...
-
Glut 回调函数小结
2014-04-08 16:25:50 void glutDisplayFunc(void (*func)(void)); 注册当前窗口的显示回调函数 参数: func:形为void func( ...
-
WPF学习(二)布局与菜单、工具栏
布局 //表格①Grid//3列 4行的表格 <Grid> <Grid.ColumDefinitions> <ColumnDefinti ...
-
dedecms 财付通接口
用织梦做了个旅游网站,网址:http://www.redtourism.cn/ 客户要求财付通支付,上网找了下 不是要买就是要钱,只有自己写了. 代码: <?phpif(!defined('DE ...
-
sequence1(暴力)
sequence1 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total ...
-
iOS发展 - 使用您自己的自定义字体
一位同事问我最后一次,XXapp字体如何萌啊? 我也想提出萌哒哒的字体!然后,今天有这blog. 首先,我们正处于iOS发展,苹果给了我们很多的字体,当然,我就不一一列举在这里,英文,小汤表示看不懂啦 ...
-
C语言指针强制转化的应用
指针类型强制转化在kernel设计中非常常见,这里记录两个非常有意思的用法: 1.对地址进行运算.任何虚拟地址都表示成void *va = (void *) 100, *(va + 1) ==101 ...
-
Activity、Fragment、Dialog基类简单整理
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 这里简单记录下Activity.Fragment.Dialog基类中的常规写法,后续根据项目需求进行相应的扩展. BaseActiv ...
-
h5手势密码开发(使用jq)
直接上代码: 目录结构: 本次开用到的技术jq,以及引入的jq插件jquery.gesture.password.min.js index.html <!DOCTYPE html> < ...
-
django路由转发
一.路由转发 通常,我们会在每个app里,各自创建一个urls.py路由模块,然后从根路由出发,将app所属的url请求,全部转发到相应的urls.py模块中. 例如,下面是Django网站本身的UR ...