关于javascript:处理异步事件的三种方式

在网站开发中，异步事件是我的项目必然须要解决的一个环节，也因为前端框架的衰亡，通过框架实现的 SPA 曾经是疾速建构网站的标配了，一部获取数据也就成了不可或缺的一环；本文来就讲一讲 JavaScript 中异步的解决形式。

同步？异步？

首先当然要先了解一下同步及异步别离是指什么。

这两个名词对于初学者来说总是让人感到困惑的，毕竟从中文字面上的意思很容易让人反过来了解，从信息科学的角度来说，同步 指的是一件一件做事，而 异步 则是很多事件在一起并行的解决。

比方咱们去银行办理业务，在窗口前排队就是同步执行，而拿到号码先去做别的事件的就是异步执行；通过 Event Loop 的个性，在 JavaScript 处里异步事件可说是轻而易举的

那么在 JavaScript 中解决异步事件的办法是什么呢？

回调函数

咱们最相熟最的就是回调函数了。例如网页与用户进行互动时注册的事件监听器，就须要接管一个回调函数；或是其余 Web API 的各种性能如 setTimeout、xhr，也都能通过传递回调函数在用户要求的机会去触发。先看一个 setTimeout 的例子：

// callback
function withCallback() {console.log('start')
  setTimeout(() => {console.log('callback func')
  }, 1000)
  console.log('done')
}withCallback()
// start
// done
// callback func

在 setTimeout 被执行后，当过了指定的工夫距离之后，回调函数会被放到队列的末端，再期待事件循环解决到它。

留神：也就时因为这种机制，开发者设定给 setTimeout 的工夫距离，并不会精准的等于从执行到触发所通过的工夫，应用时要特地留神！

回调函数尽管在开发中非常常见，但也有许多难以避免的问题。例如因为函数须要被传递给其余函数，开发者难以掌控其余函数内的解决逻辑；又因为回调函数仅能配合 try … catch 捕获谬误，当异步谬误产生时难以管制；另外还有最驰名的“回调天堂”。

Promise

幸好在 ES6 之后呈现了 Promise，援救了身陷在天堂的开发者们。其根本用法也很简略：

function withPromise() {
  return new Promise(resolve => {console.log('promise func')
    resolve()})
}
withPromise()
  .then(() => console.log('then 1'))
  .then(() => console.log('then 2'))
// promise func
// then 1
// then 2

之前探讨 Event Loop 时没有提到的是，在 HTML 5 的 Web API 规范 中，Event Loop 新增了微工作队列（micro task queue），而 Promise 正是通过微工作队列来驱动它的；微工作队列的触发机会是在栈被清空时，JavaScript 引擎会先确认微工作队列有没有货色，有的话就优先执行，直到清空后才从队列拿出新工作到栈上。

如下面的例子，当函数回传一个 Promise 时，JavaScript 引擎便会把后传入的函数放到微工作队列中，重复循环，输入了上列的后果。后续的 .then 语法会回传一个新的 Promise，参数函数则接管前一个 Promise.resolve 的后果，凭借这样函数参数传递，让开发者能够管道式的按程序解决异步事件。

如果在例子中加上 setTimeout 就更能分明了解微工作与个别工作的差异：

function withPromise() {
  return new Promise(resolve => {console.log('promise func')
    resolve()})
}
withPromise()
  .then(() => console.log('then 1'))
  .then(() => setTimeout(() => console.log('setTimeout'), 0))
  .then(() => console.log('then 2'))
// promise func
// then 1
// then 2 -> 微工作优先执行
// setTimeout

另外，后面所说的回调函数很难解决的异步谬误，也能够通过 .catch 语法来捕捉。

function withPromise() {
  return new Promise(resolve => {console.log('promise func')
    resolve()})
}
withPromise()
  .then(() => console.log('then 1'))
  .then(() => { throw new Error('error') })
  .then(() => console.log('then 2'))
  .catch((err) => console.log('catch:', err))
// promise func
// then 1
// catch: error
//   ...error call stack

async await

从 ES6 Promise 问世之后，异步代码从回呼天堂逐步变成了优雅的函数式管道解决，但对于不相熟度的开发者来说，只不过是从回调天堂变成了 Promise 天堂而已。

在 ES8 中标准了新的 async/await，尽管只是 Promise 和 Generator Function 组合在一起的语法糖，但通过 async/await 便能够将异步事件用同步语法来解决，就如同是老树开新花一样，写起来的格调与 Promise 齐全不同：

function wait(time, fn) {
  return new Promise(resolve => {setTimeout(() => {console.log('wait:', time)
      resolve(fn ? fn() : time)
    }, time)
  })
}
await wait(500, () => console.log('bar'))
console.log('foo')
// wait: 500
// bar
// foo

通过把 setTimeout 包装成 Promise，再用 await 关键字调用，能够看到后果会是同步执行的先呈现 bar，再呈现 foo，也就是结尾提到的将异步事件写成同步解决。

再看一个例子：

async function withAsyncAwait() {for(let i = 0; i < 5; i++) {await wait(i*500, () => console.log(i))
  }
}await withAsyncAwait()
// wait: 0
// 0
// wait: 500
// 1
// wait: 1000
// 2
// wait: 1500
// 3
// wait: 2000
// 4

代码中实现了 withAsyncAwait 函数，用 for 循环及 await 关键字重复执行 wait 函数；此处执行时，循环每次会按程序期待不同的秒数再执行下一次循环。

在应用 async/await 时，因为 await 关键字只能在 async function 中执行，应用时务必要记得要同时应用。

另外在用循环解决异步事件时，须要留神在 ES6 之后提供的很多 Array 办法都不反对 async/await 语法，如果这里用 forEach 取代 for，后果会变成同步执行，每隔 0.5 秒就打印出数字：

总结

本文简略介绍了 JavaScript 解决异步的三种形式，并通过一些简略的例子阐明代码的执行程序；响应后面提到的事件循环，再其中退出了微工作队列的概念。心愿帮你了解同步和异步的利用。

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

• 深刻了解 Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13 个帮你进步开发效率的古代 CSS 框架
• 疾速上手 BootstrapVue
• JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
• WebSocket 实战：在 Node 和 React 之间进行实时通信
• 对于 Git 的 20 个面试题
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什么？
• 30 分钟用 Node.js 构建一个 API 服务器
• Javascript 的对象拷贝
• 程序员 30 岁前月薪达不到 30K，该何去何从
• 14 个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩大插件
• Node.js 多线程齐全指南
• 把 HTML 转成 PDF 的 4 个计划及实现

• 更多文章 …