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

幽梦林子

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操作符对返回的数据做处理。