RxJS 应用之流式读取文件

最后更新日期:2018-02-06

  问题描述:我们要在浏览器读取用户的文件并计算其 sha1 hash ,但是用户文件可能很大,全部读取会占用很多内存,如何流式读取并流式计算 hash?

  解决方案:RxJS to the rescue!

  首先我们要用到 HTML5 的 FileReader API ,这个 API 是异步的,下面这个函数将一个 Blob 变成 Promise[ArrayBuffer]

  要流式读取,首先想到的是将这个过程抽象成一个 generator ,每次 yield 出来一个分片,但 generator 的 yield 必须是同步返回一个值,要想异步返回一个值,最好的抽象显然是 Observable

  或者说:Observable = List[Promise]:一个 Observable 就是一组 Promise 构成的序列(但需要注意的是 Observable 可能是无限长的)。

  下面这个函数会按照指定的分片大小(chunkSize)读取一个 Blob ,每次返回一个分片:

  目前主流的 js hash 库(如 crypto / CryptoJS)都是支持流式计算的,那么使用的时候就简单了,只需要指定 3 个回调函数即可:

  以上代码基于 rxjs 5.5.6。