PhoneGap中文网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 741|回复: 0

Angularjs4.0使用RxJs如何实现数据请求

[复制链接]

40

主题

73

帖子

306

积分

中级会员

Rank: 3Rank: 3

积分
306
发表于 2017-8-11 12:43:02 | 显示全部楼层 |阅读模式
Angularjs4.0使用RxJs的情况下,如何实现数据请求呢?请看以下流程:


     需要用到请求数据的地方引入Http模块、Jsonp模块,以及rxjs。


      RxJS是一种针对异步数据流编程工具,或者叫响应式扩展编程;可不管如何解释RxJS其目标就是异步编程,Angular引入RxJS为了就是让异步可控、更简单。


     大部分RxJS操作符都不包括在Angular的Observable基本实现中,基本实现只包括Angular本身所需的功能。
如果想要更多的RxJS功能,我们必须导入其所定义的库来扩展Observable对象, 以下是这个模块所需导入的所有RxJS操作符:

  1. import {Http,Jsonp} from "@angular/http";
  2. import {Observable} from "rxjs";
  3. import "rxjs/Rx";
复制代码



    你可能并不熟悉这种import 'rxjs/Rx'语法,它缺少了花括号中的导入列表:{...}。这是因为我们并不需要操作符本身,这种情况下,我们所做的其实是导入这个库,加载并运行其中的脚本, 它会把操作符添加到Observable类中。


构造函数内申明:

  1. constructor(private http:Http,private jsonp:Jsonp) { }
复制代码



get请求

  1. this.http.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1")
  2.       .map(res => res.json()) .subscribe(
  3.          function(data){
  4.            console.log(data);
  5.          }
  6.       );
复制代码



Jsonp请求


  1. this.jsonp.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK")
  2.       .map(res => res.json()) .subscribe(
  3.          function(data){
  4.            console.log(data);
  5.          }
  6.       );
复制代码


http.get 方法中返回一个Observable对象,我们之后调用RxJS的map操作符对返回的数据做处理。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

Archiver|手机版|小黑屋|PhoneGap中文网 ( 京ICP备13027796号-1

GMT+8, 2018-7-19 00:25 , Processed in 0.340769 second(s), 31 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表