美文网首页程序员
Rxjs 基础(1)

Rxjs 基础(1)

作者: zidea | 来源:发表于2019-02-14 07:22 被阅读25次

简单定义是可以将 Rxjs 理解为异步的 loDash

现在 web 的 5 个特征

  • AJAX
  • 用户事件(单击、 鼠标移动、键盘事件等)
  • 动画
  • sockets
  • workers(任务/作业)

回调

通常 javascript 会采用回调的方式来处理异步

getSomeData((data)=>{
  console.log('接受数据',data);
});

回调问题顾名思义,是我们所谓 callback Hell 也有叫做金子塔什么来的。就是层层嵌套看起来不舒服,当然不仅仅是这些。

Promise 的出现可以让代码显得更清晰易懂

getSomeData(id)
  .then(data)=>{
    console.log('接受数据',data);
    return getSomeData(data.parentId);
  })
  .then( data => {
    doStuff(data);
    return getSomeData(data.parentId);
  });

Promises 的特性

  • 不可取消
  • 不可变(immutable)
  • 一次性返回(单值)
  • 缓存

promise 的有些特性也是 promise 的缺点和问题所在,列出一下两个问题

1. Promise 无法取消

我们经常在线看一些视频,当我们找到一个想看的视频然后打开这个视频,这时候就发起了一个 Promise 的请求,但是随后我们又发现一个更适合我们的视频,随后我们就打开了新的视频以收看,这时候就又发起一个 promise,由于 promise 是无法取消的所有前一个 promise 还在进行,这样无形中就占用了我们的网络资源。

我们需要一个类型是一个可以取消的异步

Promises 只能一次性返回单值

  • AJAX(适合单值)
  • 用户事件(单击、 鼠标移动、键盘事件等)
  • 动画
    需要时时更新动画的状态
  • sockets
  • workers(作业/任务)

我们需要的类型是可以异步返回一个 iterable

Iterable

  • iterable.iterator() 获取 iterator
  • iterator.next() 获取结果
    • result.value(): 返回值
    • result.done 是否完成
  • 在调用 iterator.next() 时可能会抛出一个错误
const iterator = iterable.iterator();

while(true){
    try {
        let result = iterator.next();
    } catch (error) {
        handleError(err)
    }

    if(result.done){
        break;
    }
    doSomething(result.value)
}

相关文章

  • Rxjs 基础(1)

    简单定义是可以将 Rxjs 理解为异步的 loDash 现在 web 的 5 个特征 AJAX 用户事件(单击、 ...

  • RxJS

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

  • rxjs

    rxjs使用观察者模式、迭代器模式以及函数式编程实现一种理想的、管理序列事件的方式rxjs的基础概念 Observ...

  • RxJS基础篇

    关于RxJS RxJS 是 Reactive Extensions for JavaScript 的缩写,起源于 ...

  • rxjs 基础概念

    Rxjs 是什么? RxJS 是一个库,它通过使用 observable 序列来编写异步和基于事件的程序。它提供了...

  • rxjs(1)

    问题 调用后不会立即完成的函数,叫做异步函数,它是影响程序执行顺序的罪魁祸首。当函数A需要使用到函数B的返回值,而...

  • 01RxJS-响应式编程类库

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

  • 浅析Angular之RxJS

    本文结构: 什么是RxJS RxJS有什么特点 RxJS核心概念 什么是RxJS 在javaScript中,我们可...

  • Rxjs系列教程目录

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

  • RxJS官方教程(六) 算子

    RxJS官方教程(一) 概览 RxJS官方教程(二) Observable RxJS官方教程(三) Observa...

网友评论

    本文标题:Rxjs 基础(1)

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