async-for-js

介绍关于js开发中所涉及的主流异步编程解决方案

repo: async-for-js

例子

插入3个div元素，其中第二个div元素使用setTimeout模拟异步操作，理想的插入顺序为div1 div2 div3，但这里的代码的插入顺序为div1 div3 div2。

// async way
function _async() {
  document.body.appendChild(div1)

  setTimeout(function () {
    document.body.appendChild(div2)
  }, 2000)

  document.body.appendChild(div3)
}

_async()

Callback

最常用的方法是利用callback(回调函数)的方式，因为js中函数也是作为对象存在的，因此可以被当做参数传入另一个函数中，只需要在异步操作执行代码后调用回调函数即可。

但是使用回调函数有很明显的局限性，一方面体现在需要自己对异步操作进行控制，另一方面还很容易陷入”回调地狱”。

// use plain callback to sync
function _callback(cb) {
  document.body.appendChild(div1)

  setTimeout(function () {
    document.body.appendChild(div2)
    cb('done')
  }, 2000)

  return 'done'
}

_callback(function () {
  document.body.appendChild(div3)
})

Promise

因为回调地狱的问题，后来聪明的人使用将回调延迟执行的思想，从而发明了promise库，调用者可以根据异步流程随心所欲的resolve或reject某个值给之后的操作，从而解决了毁掉地狱的问题。

不过使用promise仍然有问题，就是当代码逻辑很长的时候，总需要带着大片大片的then方法，可读性仍然不够清晰。

// use promise to sync
function _promise() {
  document.body.appendChild(div1)

  return new Promise(res => {
    setTimeout(function () {
      document.body.appendChild(div2)
      res('done')
    }, 2000)
  })
}

_promise().then(data => {
  console.log(data)
  document.body.appendChild(div3)
})

Generate

后来promise加入了es6标准，同时推出了新的异步解决方案，叫做generate函数，大体讲是提供了一个具有状态机功能的函数，每次执行会停止在实现者声明的某个状态，下次调用会继续从这个状态开始执行。

generate的出现，使必须依靠callback实现异步操作的代码风格，可以使用同步代码风格实现，是一颗非常甜的语法糖。

但是它仍有有一些缺点，就是它作为状态机，无法自执行，必须借助实现一个run函数或使用第三方库(如co)。

// use generate to sync
function* _generate() {
  document.body.appendChild(div1)

  yield function (cb) {
    setTimeout(function () {
      document.body.appendChild(div2)
      cb()
    }, 2000)
  }

  document.body.appendChild(div3)

  return 'done'
}

function run(fn) {
  var gen = fn()

  function next(data) {
    var result = gen.next(data)

    console.log(result.value)

    if (result.done) return

    result.value(next)
  }

  next()
}

run(_generate)

Async/await

为了解决generate的缺点，es7很快发布了继generate更强大的一个东西，叫做async函数。简单说，它并没有什么新特性，把它看做是可以自执行的generate函数即可，其中的await的操作符可以看做是yield操作符的翻版。

// use async/await and promise to sync
const fn = function () {
  return new Promise(res => {
    setTimeout(function () {
      res(document.body.appendChild(div2))
    }, 2000)
  })
}

async function _await () {
  document.body.appendChild(div1)
  const f = await fn()
  console.log(f)
  document.body.appendChild(div3)
}

_await()

Observable

最近很火的rxjs也快成用来解决这个问题，详细的介绍可以去它的官网了解。

// use rxjs and callback to sync
const _callbackObservable = Observable.bindCallback(_callback)
const result = _callbackObservable()

// result.subscribe(x => {
//   document.body.appendChild(div3)
//   console.log(x)
// })