擅长处理异步数据流

在我们日常的开发中，大家会经常接触到异步数据流。

• 异步 JavaScript 中的异步，比如 EventCallback，Ajax，WebSocket
• 数据 程序中的原始信息，比如从服务端返回的 JSON，用户行为产生的 事件对象等
• 流 更高维的数据，它们在传统意义上增加了时间维度，随着时间的流动而不停产生。

满足上面三个特征的特定业务模型都属于异步数据流。比如:

socket.on('message', (e) => {
  messageHandler(e.data)
})

在 JavaScript 的世界里，callback 与 Promise 是最基础的两种异步原语。其中，callback 可以描述一切异步数据流，但它有一些广为人知的问题导致业务上很难方便的将多个 callback 组合使用。

Promise 试图解决 callback 组合性的同时，丢失了 callback 原有的大部分表达能力。在现实的业务场景中，例如 Dom event 与 Ajax progress 与 Ajax Cancellation 这样的异步场景 Promise 都不能很好的表达。

RxJS 拥有两者的所有优点，让我们用一段代码来初步感受一下 RxJS 操作异步数据流的能力:

RxJS 操作异步数据流的能力体现在下面几个方面:

• 操作异步，异步流程控制，类似 Promise
• 操作数据，类似 Lodash
• 操作流，控制时间。比如 debounce/throttle/delay

声明式

在上面的代码示例中，我们能看到 RxJS 声明式的特点。声明式给项目工程带来的直接好处是代码可读性与可维护性的大幅度提升。

我们通常在编写复杂业务逻辑的时候会使用各种抽象手段来达到声明式的效果，从而让以后阅读与维护这些代码的成本变得更低。下面的代码展示了声明式的 RxJS 代码与过程式代码在可读性上的显著差异

// 过程式

let lastQuery
let lastSortBy
let lastPage
let lastestResult
let abortController

async function handlerOptionsChange({ query, sortBy, page }) {
  if (query === lastQuery && sortBy === lastSortBy && page === lastPage) {
    return latestResult
  }

  abortController.abort()

	abortController = new AbortController()
  
  let payload = lastPayload
  if (lastQuery != query) {
    payload = await fetchPayloadByQuery(query, abortController.signal)
  }

  const latestResult = fetchResult({ payload, sortBy, page }, abortController.signal)

  lastQuery = query
  lastPage = page
  lastSortBy = sortBy

  return latestResult
}