JS异步编程 (1)
1.1 什么叫异步
异步(async)
是相对于同步(sync)
而言的,很好理解。
同步
就是一件事一件事的执行。只有前一个任务执行完毕,才能执行后一个任务。而异步
比如:
setTimeout(function cbFn(){
console.log('learnInPro');
}, 1000);
console.log('sync things');
setTimeout就是一个异步任务
,当JS引擎顺序执行到setTimeout的时候发现他是个异步任务,则会把这个任务挂起,继续执行后面的代码。直到1000ms后,回调函数cbFn才会执行,这就是异步,在执行到setTimeout的时候,JS并不会傻呵呵的等着1000ms执行cbFn回调函数,而是继续执行了后面的代码。
1.2 为啥要在JS中使用异步
由于javascript是单线程
的,只能在JS引擎的主线程上运行的,所以js代码只能一行一行的执行,不能在同一时间执行多个js代码任务,这就导致如果有一段耗时较长的计算,或者是一个ajax请求等IO操作,如果没有异步的存在,就会出现用户长时间等待,并且由于当前任务还未完成,所以这时候所有的其他操作都会无响应。
1.3 那为啥JS不设计成多线程的
这主要跟javascript的历史有关,js最开始只是为了处理一些表单验证和DOM操作而被创造出来的,所以主要为了语言的轻量和简单采用了单线程
的模式。多线程模型
相比单线程
要复杂很多,比如多线程需要处理线程间资源的共享问题,还要解决状态同步等问题。
如果JS是多线程的话,当你要执行往div中插入一个DOM的操作的同时,另一个线程执行了删除这个div的操作,这个时候就会出现很多问题,我们还需要为此增加锁机制等。
好,那么现在我们知道了单线程的JS为了不出现长时间等待的状况,会使用异步来处理。比如当执行一个ajax操作的时候,当js发出请求后,不会傻了吧唧的在那里等着服务器数据返回,而是去继续执行后面的任务,等到服务器数据返回以后再通知js引擎去处理。
那么常见的异步模式有哪些呢?
- 回调函数
- 事件监听
- 发布/订阅模式(又称观察者模式)
- promise
后来ES6中,引入了
Generator
函数;ES7中,async/await
更是将异步编程带入了一个全新的阶段。
这些异步模式我们会在后面详细来说,这里我们有个概念就好。
1.4 JS如何实现异步
具体JS是如何实现异步操作的呢?
答案就是JS的事件循环机制(Event Loop)
。
具体来说:
当JS解析执行时,会被引擎分为两类任务,同步任务(synchronous)
和 异步任务(asynchronous)
。
对于同步任务来说,会被推到执行栈按顺序去执行这些任务。
对于异步任务来说,当其可以被执行时,会被放到一个 任务队列(task queue)
里等待JS引擎去执行。
当执行栈中的所有同步任务完成后,JS引擎才会去任务队列里查看是否有任务存在,并将任务放到执行栈中去执行,执行完了又会去任务队列里查看是否有已经可以执行的任务。这种循环检查的机制,就叫做事件循环(Event Loop)
。
对于任务队列
,其实是有更细的分类。其被分为 微任务(microtask)队列
& 宏任务(macrotask)队列
宏任务: setTimeout、setInterval等,会被放在宏任务(macrotask)队列。
微任务: Promise的then、Mutation Observer等,会被放在微任务(microtask)队列。
Event Loop的执行顺序是:
- 首先执行执行栈里的任务。
- 执行栈清空后,检查微任务(microtask)队列,将可执行的微任务全部执行。
- 取宏任务(macrotask)队列中的第一项执行。
- 回到第二步。
注意: 微任务队列每次全执行,宏任务队列每次只取一项执行。
我们举个例子:
setTimeout(() => {
console.log('我是第一个宏任务');
Promise.resolve().then(() => {
console.log('我是第一个宏任务里的第一个微任务');
});
Promise.resolve().then(() => {
console.log('我是第一个宏任务里的第二个微任务');
});
}, 0);
setTimeout(() => {
console.log('我是第二个宏任务');
}, 0);
Promise.resolve().then(() => {
console.log('我是第一个微任务');
});
console.log('执行同步任务');
最后的执行结果是:
- // 执行同步任务
- // 我是第一个微任务
- // 我是第一个宏任务
- // 我是第一个宏任务里的第一个微任务
- // 我是第一个宏任务里的第二个微任务
- // 我是第二个宏任务
1.5 JS异步编程模式
这里我们已经知道了JS中异步的运行机制,我们翻