美文网首页
Rxjs学习

Rxjs学习

作者: 白璞1024 | 来源:发表于2017-10-21 21:45 被阅读0次

RXJs

1、 Example

  1. 简单来说就是promise的加强版
    这是个promise的用法
let promise = new Promise(resolve =>{
    setTimeout(() => {
        resolve('--promise timeout ---')
    })
})

promise.then(
    value=>console.log(value)
)
  1. Observable 的写法 相当于发散函数
let stream1 = new Observable(observer =>{
    let timeout  = setTimeout(()=> {
        observer.next('ibservable timeout ')
    },2000);
    return ()=>{
        clearTimeout(timeout)
    }
})

let disposable = stream1.subscribe(value=>console.log(value));

2、不同点

1. 中间禁止

  • promisem没办法中途禁止
  • observer是可以中间禁止的
    • disposable.unsubscribe()

2 observer可以发射很多的值

  • promise只能resolve一次,兑现一次就不能resolve了
  • 但是observe可不断的next

3.observer 有很多的工具函数

  • promise没有什么函数
  • 如下的
// 因为会源源不断的发送,所以可以甄别
//进行过滤的函数
stream2.filter(val=>val%2==0)
.subscribe(val=>console.log("filter=>"+val))

//进行map的函数
//对每个值进行平方
stream2.map(val=>val*val)
.subscribe(val=>console.log("filter=>"+val))

underscore.js为我们扩展了很多的实用性工具函数/方法
同理,RxJs上边添加了很多的工具函数

3、应用的场景

//场景1 发送请求

public getPostList(searchText:string ,page:number=1) Observable<Post[]>{
    let url  = thie .postListURL;
    let params  = new URLSearchParams();//这里组织需要提交到后台的代码
    if( searchText){
        params.set("search",searchText);
        url=this.postListUrL;
        cosnole.log('searchText==${searchText}');
    }
    params.set("page",string(page));


    return this.http
    .get(url,{search:params})
    .map((rse:Response)=>{
        let result = res.json();
        console.log(result);
        return;
    })
    .catch((error:any)=>Observable.throw(error||'Server error '));

}
//如果是post请求的话

let data =new URLSearchParams();
data.append("email",user.email);
data.append("PASSWORD",user.OASSWIRD);
return this.http.post(this.userRegisterURL,data)


//场景2:事件处理

对每次按键发起请求

this.searchTextStrwam.debounceTime(500)//如果发现用户在一定时间内不在按键盘, 去抖动操作
.distinctUntilChange()//除非输入框输入的内容和上一次不一样,要不就不进行操作
.subscribe(searchText=>{
    console.log(this.searchText);
    })


详情请见 angular2的各种事件机制

相关文章

  • Rxjs系列教程目录

    RxJS-中文文档RxJS-中文指南 rxjs学习入门心得(一)Observable可观察对象rxjs学习入门心得...

  • Rxjs入门与初步应用

    学习资料 https://cn.rx.js.org/https://github.com/RxJS-CN/rxjs...

  • 第1章 函数响应式编程

    注: 学习程墨老师《深入浅出RxJS》的笔记 RxJS采用了函数响应式编程。RxJS世界中有一种特殊的对象,称为流...

  • RXJS学习资料

    这里推荐几篇好的学习资料,我就不再整理了Observable详解RxJS Operators 详解rxjs官方文档...

  • RxJS简易入门

    什么是RxJS?RxJS解决什么样的问题?通过怎么样的手段?带着这些问题,我们便来学习一下RxJS,本文旨在帮助大...

  • Rxjs学习

    一个可观察对象的执行期间,零个到无穷多个next通知被发送。如果Error或者Complete通知一旦被发送,此后...

  • Rxjs学习

    RXJs 1、 Example 简单来说就是promise的加强版这是个promise的用法 Observable...

  • RxJS学习笔记1

    前置:我目前的学习资料是30天精通RxJS,那个时候的RxJS是5.x版本,而目前最新版本是RxJS 6,所以资料...

  • 01RxJS-响应式编程类库

    rxjs-响应式编程类库)RxJS官网[https://rxjs.dev/] RxJS(Reactive Exte...

  • RxJS

    RxJS官网[https://rxjs.dev/] 1 概述 1.1 什么是 RxJS ? RxJS 是一个用...

网友评论

      本文标题:Rxjs学习

      本文链接:https://www.haomeiwen.com/subject/wqywuxtx.html