// 每日前端夜话 第426篇
// 正文共：2100 字
// 预计阅读时间：9 分钟
在网站开发中，异步事件是项目必然须要处理的一个环节，也由于前端框架的兴起，经过框架实现的 SPA 已是快速建构网站的标配了，一部获取数据也就成了不可或缺的一环；本文来就讲一讲 JavaScript 中异步的处理方式。前端
同步？异步？
首先固然要先理解一下同步及异步分别是指什么。web
这两个名词对于初学者来讲老是让人感到困惑的，毕竟从中文字面上的意思很容易让人反过来理解，从信息科学的角度来讲，[同步](https:// developer.mozilla.org/en-US/docs/Glossary/Synchronous) 指的是一件一件作事，而 异步 则是不少事情在一块儿并行的处理。promise
好比咱们去银行办理业务，在窗口前排队就是同步执行，而拿到号码先去作别的事情的就是异步执行；经过 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的时间间隔，并不会精准的等于从执行到触发所通过的时间，使用时要特别注意！async
回调函数虽然在开发中十分常见，但也有许多难以免的问题。例如因为函数须要被传递给其余函数，开发者难以掌控其余函数内的处理逻辑；又由于回调函数仅能配合 try … catch 捕捉错误，当异步错误发生时难以控制；另外还有最著名的“回调地狱”。编辑器
Promise
幸亏在 ES6 以后出现了 Promise，拯救了身陷在地狱的开发者们。其基本用法也很简单：ide
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 处理异步的三种方式，并经过一些简单的例子说明代码的执行顺序；呼应前面提到的事件循环，再其中加入了微任务队列的概念。但愿帮你理解同步和异步的应用。
点分享
点收藏
点点赞
点在看
本文分享自微信公众号 - 前端先锋（jingchengyideng）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。