平武建站

Angular之Rxjs基础操作-创新互联

一 : 处理异步 (Observable)

① , 首先引入

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：主机域名、网络空间、营销软件、网站建设、兰山网站维护、网站推广。
import { Observable } from 'rxjs';

② , 使用setTimeOut来模拟延迟 , 返回Observable对象句柄

var stream : Observable = new Observable( observer => {
        setTimeout( () : void => {
          observer.next("okokok");
        } , 2000 );
      });

③ , 通过Observable对象句柄 , 获取异步数据

stream.subscribe( (value : string) => {
        console.log( value );
      } );

④ , 结果
Angular之Rxjs基础操作

二 : 取消订阅(承上一操作)

意思 : 在异步还没执行前 , 撤销行动
引入 :

import { Subscription } from 'rxjs';

① , 接收Subscription句柄

var sub : Subscription = this._stream.subscribe( (value : string) => {
        console.log( value );
      } );

② , 使用Subscription句柄调用unsubscribe(),撤销行动

setTimeout( () : void => {
          //取消执行
          sub.unsubscribe();
        } , 1500 );

这样 , 因为在1.5S就执行了撤销 , 所以行动在2S后触发是不会执行的 , 所以不会打印 "okokok"

三 : 订阅的多次执行(承上一操作) , 注意不要撤销动作

将setOutTime改成setInterval

var stream : Observable = new Observable( observer => {
        setInterval( () : void => {
          observer.next("okokok");
        } , 2000 );
      });

结果:
Angular之Rxjs基础操作

四 : filter , map (承上三操作) 但是将传值改为number类型

注意 : Angular 6之前请执行命令 npm install rxjs-compat

① , 引入

import {map,filter} from 'rxjs/operators';

② , 构建异步

var count : number = 0;
var stream : Observable = new Observable( observer => {
        setInterval( () : void => {
                    count ++; 
          observer.next(count);
        } , 2000 );
      });

③ , 订阅改变如下

 stream.pipe(
        filter( value => value % 2 === 0 ) ,
        map( value => { return Math.pow( value , 2 ); } )
      ).subscribe( value => {
        console.log( value );
      } );

可以看出 , 在订阅之前加了一层处理放在pipe中

④ , 结果
Angular之Rxjs基础操作

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。


当前题目：Angular之Rxjs基础操作-创新互联
文章URL：http://pwwzsj.com/article/ddiidp.html

其他资讯