Node.js 实用笔记（二）事件循环和异步操作

• Node.js 事件循环

  阻塞事件循环
  任何花费太长时间才能将控制权返回给事件循环的 JavaScript 代码，都会阻塞页面中任何 JavaScript 代码的执行，甚至阻塞 UI 线程，并且用户无法单击浏览、滚动页面等。

  JavaScript 中几乎所有的 I/O 基元都是非阻塞的。 网络请求、文件系统操作等。 被阻塞是个异常，这就是 JavaScript 如此之多基于回调（最近越来越多基于 promise 和 async/await）的原因。

  消息队列
  当调用 setTimeout() 时，浏览器或 Node.js 会启动定时器。 当定时器到期时（在此示例中会立即到期，因为将超时值设为 0），则回调函数会被放入“消息队列”中。

  在消息队列中，用户触发的事件（如单击或键盘事件、或获取响应）也会在此排队，然后代码才有机会对其作出反应。 类似 onLoad 这样的 DOM 事件也如此。

  事件循环会赋予调用堆栈优先级，它首先处理在调用堆栈中找到的所有东西，一旦其中没有任何东西，便开始处理消息队列中的东西。

  我们不必等待诸如 setTimeout、fetch、或其他的函数来完成它们自身的工作，因为它们是由浏览器提供的，并且位于它们自身的线程中。 例如，如果将 setTimeout 的超时设置为 2 秒，但不必等待 2 秒，等待发生在其他地方。

  ES6 作业队列
  ECMAScript 2015 引入了作业队列的概念，Promise 使用了该队列（也在 ES6/ES2015 中引入）。 这种方式会尽快地执行异步函数的结果，而不是放在调用堆栈的末尾。

  在当前函数结束之前 resolve 的 Promise 会在当前函数之后被立即执行。

  const bar = () => console.log('bar')
  
  const baz = () => console.log('baz')
  
  const foo = () => {
    console.log('foo')
    setTimeout(bar, 0)
    new Promise((resolve, reject) =>
      resolve('应该在 baz 之后、bar 之前')
    ).then(resolve => console.log(resolve))
    baz()
  }
  
  foo()
  

  这会打印：

  foo
  baz
  应该在 baz 之后、bar 之前
  bar
  

  了解 process.nextTick()
  每当事件循环进行一次完整的行程时，我们都将其称为一个滴答。 当将一个函数传给 process.nextTick() 时，则指示引擎在当前操作结束（在下一个事件循环滴答开始之前）时调用此函数：

  process.nextTick(() => {
    //做些事情
  })
  

  事件循环正在忙于处理当前的函数代码。当该操作结束时，JS 引擎会运行在该操作期间传给 nextTick 调用的所有函数。 这是可以告诉 JS 引擎异步地（在当前函数之后）处理函数的方式，但是尽快执行而不是将其排入队列。

  调用 setTimeout(() => {}, 0) 会在下一个滴答结束时执行该函数，比使用 nextTick()（其会优先执行该调用并在下一个滴答开始之前执行该函数）晚得多。当要确保在下一个事件循环迭代中代码已被执行，则使用 nextTick()。

  了解 setImmediate()
  setImmediate() 与 setTimeout(() => {}, 0)（传入 0 毫秒的超时）、process.nextTick() 有何不同？传给 process.nextTick() 的函数会在事件循环的当前迭代中（当前操作结束之后）被执行。 这意味着它会始终在 setTimeout 和 setImmediate 之前执行。延迟 0 毫秒的 setTimeout() 回调与 setImmediate() 非常相似。 执行顺序取决于各种因素，但是它们都会在事件循环的下一个迭代中运行。

• JavaScript Promise

  Promise 如何运作
  当 promise 被调用后，它会以处理中状态开始。 这意味着调用的函数会继续执行，而 promise 仍处于处理中直到解决为止，从而为调用的函数提供所请求的任何数据。被创建的 promise 最终会以被解决状态或被拒绝状态结束，并在完成时调用相应的回调函数（传给 then 和 catch）。
  创建 promise

  let done = true
  
  const isItDoneYet = new Promise((resolve, reject) => {
    if (done) {
      const workDone = '这是创建的东西'
      resolve(workDone)
    } else {
      const why = '仍然在处理其他事情'
      reject(why)
    }
  })
  

  promise 检查了 done 全局常量，如果为真，则 promise 进入被解决状态（因为调用了 resolve 回调）；否则，则执行 reject 回调（将 promise 置于被拒绝状态）。 如果在执行路径中从未调用过这些函数之一，则 promise 会保持处理中状态。
  使用promise

  const isItDoneYet = new Promise(/* ... 如上所述 ... */)
  //...
  
  const checkIfItsDone = () => {
    isItDoneYet
      .then(ok => {
        console.log(ok)
      })
      .catch(err => {
        console.error(err)
      })
  }
  

  编排 promise

  Promise.all()
  如果需要同步不同的 promise，则 Promise.all() 可以帮助定义 promise 列表，并在所有 promise 都被解决后执行一些操作。

  const f1 = fetch('/something.json')
  const f2 = fetch('/something2.json')
  
  Promise.all([f1, f2])
    .then(res => {
      console.log('结果的数组', res)
    })
    .catch(err => {
      console.error(err)
    })
  

  ES2015 解构赋值语法也可以执行：

  Promise.all([f1, f2]).then(([res1, res2]) => {
    console.log('结果', res1, res2)
  })
  

  Promise.race()

  当传给其的首个 promise 被解决时，则 Promise.race() 开始运行，并且只运行一次附加的回调（传入第一个被解决的 promise 的结果）。

  const first = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, '第一个')
  })
  const second = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, '第二个')
  })
  
  Promise.race([first, second]).then(result => {
    console.log(result) // 第二个
  })
  

• 具有 Async 和 Await 的现代异步 JavaScript

  当 ES2015 中引入 Promise 时，它们旨在解决异步代码的问题，并且确实做到了，但是在 ES2015 和 ES2017 断开的两年中，很明显，promise 不可能成为最终的解决方案。Promise 被引入了用于解决著名的回调地狱问题，但是它们自身引入了复杂性以及语法复杂性。它们是很好的原语，可以向开发人员公开更好的语法，因此，当时机合适时，我们得到了异步函数。它们使代码看起来像是同步的，但它是异步的并且在后台无阻塞。

  const promiseToDoSomething = () => {
    return new Promise(resolve => {
      setTimeout(() => resolve('做些事情'), 10000)
    })
  }
  
  const watchOverSomeoneDoingSomething = async () => {
    const something = await promiseToDoSomething()
    return something + ' 查看'
  }
  
  const watchOverSomeoneWatchingSomeoneDoingSomething = async () => {
    const something = await watchOverSomeoneDoingSomething()
    return something + ' 再次查看'
  }
  
  watchOverSomeoneWatchingSomeoneDoingSomething().then(res => {
    console.log(res)
  })
  

  这会打印：

  做些事情 查看 再次查看