关于前端:JavaScript-异步编程史

前言

晚期的 Web 利用中，与后盾进行交互时，须要进行 form 表单的提交，而后在页面刷新后给用户反馈后果。在页面刷新过程中，后盾会从新返回一段 HTML 代码，这段 HTML 中的大部分内容与之前页面基本相同，这势必造成了流量的节约，而且一来一回也缩短了页面的响应工夫，总是会让人感觉 Web 利用的体验感比不上客户端利用。

2004 年，AJAX 即“Asynchronous JavaScript and XML”技术横空出世，让 Web 利用的体验失去了质的晋升。再到 2006 年，jQuery 问世，将 Web 利用的开发体验也进步到了新的台阶。

因为 JavaScript 语言单线程的特点，不论是事件的触发还是 AJAX 都是通过回调的形式进行异步工作的触发。如果咱们想要线性的解决多个异步工作，在代码中就会呈现如下的状况：

getUser(token, function (user) {  getClassID(user, function (id) {    getClassName(id, function (name) {      console.log(name)    })  })})

咱们常常将这种代码称为：“回调天堂”。

事件与回调

家喻户晓，JavaScript 的运行时是跑在单线程上的，是基于事件模型来进行异步工作触发的，不须要思考共享内存加锁的问题，绑定的事件会依照程序齐齐整整的触发。要了解 JavaScript 的异步工作，首先就要了解 JavaScript 的事件模型。

因为是异步工作，咱们须要组织一段代码放到将来运行（指定工夫完结时或者事件触发时），这一段代码咱们通常放到一个匿名函数中，通常称为回调函数。

setTimeout(function () {  // 在指定工夫完结时，触发的回调}， 800)window.addEventListener("resize", function() {  // 当浏览器视窗发生变化时，触发的回调})

将来运行

后面说过回调函数的运行是在将来，这就阐明回调中应用的变量并不是在回调申明阶段就固定的。

for (var i = 0; i < 3; i++) {  setTimeout(function () {    console.log("i =", i)  }, 100)}

这里间断申明了三个异步工作，100毫秒 后会输入变量 i 的后果，依照失常的逻辑应该会输入 0、1、2 这三个后果。

然而，事实并非如此，这也是咱们刚开始接触 JavaScript 的时候会遇到的问题，因为回调函数的理论运行机会是在将来，所以输入的 i 的值是循环完结时的值，三个异步工作的后果统一，会输入三个 i = 3。

经验过这个问题的同学，个别都晓得，咱们能够通过闭包的形式，或者从新申明局部变量的形式解决这个问题。

事件队列

事件绑定之后，会将所有的回调函数存储起来，而后在运行过程中，会有另外的线程对这些异步调用的回调进行调度的解决，一旦满足“触发”条件就会将回调函数放入到对应的事件队列（这里只是简略的了解成一个队列，理论存在两个事件队列：宏工作、微工作）中。

满足触发条件个别有以下几种状况：

DOM 相干的操作进行的事件触发，比方点击、挪动、失焦等行为；
IO 相干的操作，文件读取实现、网络申请完结等；
工夫相干的操作，达到定时工作的约定工夫；

下面的这些行为产生时，代码中之前指定的回调函数就会被放入一个工作队列中，主线程一旦闲暇，就会将其中的工作依照先进先出的流程一一执行。当有新的事件被触发时，又会从新放入到回调中，如此循环，所以 JavaScript 的这一机制通常被称为“事件循环机制”。

for (var i = 1; i <= 3; i++) {  const x = i  setTimeout(function () {    console.log(`第${x}个setTimout被执行`)  }, 100)}

能够看到，其运行程序满足队列先进先出的特点，先申明的先被执行。

线程的阻塞

因为 JavaScript 单线程的特点，定时器其实并不牢靠，当代码遇到阻塞的状况，即便事件达到了触发的工夫，也会始终等在主线程闲暇才会运行。

const start = Date.now()setTimeout(function () {  console.log(`理论等待时间: ${Date.now() - start}ms`)}, 300)// while循环让线程阻塞 800mswhile(Date.now() - start < 800) {}

下面代码中，定时器设置了 300ms 后触发回调函数，如果代码没有遇到阻塞，失常状况下会 300ms 后，会输入等待时间。

然而咱们在还没加了一个 while 循环，这个循环会在 800ms 后才完结，主线程始终被这个循环阻塞在这里，导致工夫到了回调函数也没有失常运行。

Promise

事件回调的形式，在编码的过程中，就特地容易造成回调天堂。而 Promise 提供了一种更加线性的形式编写异步代码，有点相似于管道的机制。

// 回调天堂getUser(token, function (user) {  getClassID(user, function (id) {    getClassName(id, function (name) {      console.log(name)    })  })})// PromisegetUser(token).then(function (user) {  return getClassID(user)}).then(function (id) {  return getClassName(id)}).then(function (name) {  console.log(name)}).catch(function (err) {  console.error('申请异样', err)})

Promise 在很多语言中都有相似的实现，在 JavaScript 倒退过程中，比拟驰名的框架 jQuery、Dojo 也都进行过相似的实现。2009 年，推出的 CommonJS 标准中，基于 Dojo.Deffered 的实现形式，提出 Promise/A 标准。也是这一年 Node.js 横空出世，Node.js 很多实现都是按照 CommonJS 标准来的，比拟相熟的就是其模块化计划。

晚期的 Node.js 中也实现了 Promise 对象，然而 2010 年的时候，Ry（Node.js 作者）认为 Promise 是一种比拟下层的实现，而且 Node.js 的开发原本就依赖于 V8 引擎，V8 引擎原生也没有提供 Promise 的反对，所以起初 Node.js 的模块应用了 error-first callback 的格调（cb(error, result)）。

const fs = require('fs')// 第一个参数为 Error 对象，如果不为空，则示意出现异常fs.readFile('./README.txt', function (err, buffer) {  if (err !== null) {    return  }  console.log(buffer.toString())})

这一决定也导致起初 Node.js 中呈现了各式各样的 Promise 类库，比拟闻名的就是 Q.js、Bluebird。对于 Promise 的实现，之前有写过一篇文章，感兴趣能够看看：《手把手教你实现 Promise》。

在 Node.js@8 之前，V8 原生的 Promise 实现有一些性能问题，导致原生 Promise 的性能甚至不如一些第三方的 Promise 库。

所以，低版本的 Node.js 我的项目中，常常会将 Promise 进行全局的替换：

const Bulebird = require('bluebird')global.Promise = Bulebird

Generator & co

Generator(生成器) 是 ES6 提供的一种新的函数类型，次要是用于定义一个能自我迭代的函数。通过 function * 的语法可能结构一个 Generator 函数，函数执行后会返回一个iteration(迭代器)对象，该对象具备一个 next() 办法，每次调用 next() 办法就会在 yield 关键词后面暂停，直到再次调用 next() 办法。

function * forEach(array) {  const len = array.length  for (let i = 0; i < len; i ++) {    yield i;  }}const it = forEach([2, 4, 6])it.next() // { value: 2, done: false }it.next() // { value: 4, done: false }it.next() // { value: 6, done: false }it.next() // { value: undefined, done: true }

next() 办法会返回一个对象，对象有两个属性 value、done：

value：示意 yield 前面的值；
done：示意函数是否执行结束；

因为生成器函数具备中断执行的特点，将生成器函数当做一个异步操作的容器，再配合上 Promise 对象的 then 办法能够将交回异步逻辑的执行权，在每个 yeild 前面都加上一个 Promise 对象，就能让迭代器不停的往下执行。

function * gen(token) {  const user = yield getUser(token)  const cId = yield getClassID(user)  const name = yield getClassName(cId)  console.log(name)}const g = gen('xxxx-token')// 执行 next 办法返回的 value 为一个 Promise 对象const { value: promise1 } = g.next()promise1.then(user => {  // 传入第二个 next 办法的值，会被生成器中第一个 yield 关键词后面的变量承受  // 往后推也是如此，第三个 next 办法的值，会被第二个 yield 后面的变量承受  // 只有第一个 next 办法的值会被摈弃  const { value: promise2 } = gen.next(user).value  promise2.then(cId => {    const { value: promise3, done } = gen.next(cId).value    // 顺次先后传递，直到 next 办法返回的 done 为 true  })})

咱们将下面的逻辑进行一下形象，让每个 Promise 对象失常返回后，就主动调用 next，让迭代器进行自执行，直到执行结束（也就是 done 为 true）。

function co(gen, ...args) {  const g = gen(...args)  function next(data) {    const { value: promise, done } = g.next(data)    if (done) return promise    promise.then(res => {      next(res) // 将 promise 的后果传入下一个 yield    })  }    next() // 开始自执行}co(gen, 'xxxx-token')

这也就是 koa 晚期的外围库 co 的实现逻辑，只是 co 进行了一些参数校验与错误处理。通过 generator 加上 co 可能让异步流程更加的简略易读，对开发者而言必定是阶段欢喜的一件事。

async/await

async/await 能够说是 JavaScript 异步变成的解决方案，其实实质上就是 Generator & co 的一个语法糖，只须要在异步的生成器函数前加上 async，而后将生成器函数内的 yield 替换为 await。

async function fun(token) {  const user = await getUser(token)  const cId = await getClassID(user)  const name = await getClassName(cId)  console.log(name)}fun()

async 函数将自执行器进行了内置，同时 await 后不限度为 Promise 对象，能够为任意值，而且 async/await 在语义上比起生成器的 yield 更加分明，一眼就能明确这是一个异步操作。