JS 的单线程特性就意味着所有的执行任务需要进行排队，随即便有了同步（阻塞）和异步（非阻塞）两种任务。

一、那么异步任务是怎么执行的呢？

那么先来看看异步的执行机制

进入执行栈的分为：同步和异步两种任务，同步任务直接执行获取结果，异步执行任务并把对应的回调放入到任务队列中。

图一

异步任务又分为两种：宏任务（如：setTimeOut）和微任务（如：promise），两种任务处于不同的任务队列，微任务的优先级高于宏任务，会优先执行完当前队列中的所有的微任务再执行宏任务。

图二
二、异步发展历史
1
回调 -> 监听 -> 订阅/发布 -> promise -> generators -> async/await
三、各种的特性

1、回调

1
2
3
4
5
6
var fs = require('fs');
// 回调
fs.readFile("demo.txt", function(err, data) {
  if (err) throw err;
  console.log(data.toString())
})

2、事件监听

1
2
3
4
// 事件监听
document.addEventListener("xxx", function(e) {
	console.log(e)
})

3、订阅/发布

某种意义上事件监听也属于订阅分布模式

1
2
3
4
// 事件监听
document.addEventListener("xxx", function(e) {
	console.log(e)
})

4、promise

1
2
3
4
5
6
7
8
9
10
var fs = require('fs');
// promise
function getFileContext(path) {
  return new Promise(function(resolve, reject) {
    fs.readFile(path, function(err, data) {
      if (err) reject(err);
      resolve(data.toString())
    })
  })
}

5、generators

1
2
3
4
5
6
7
8
9
function * generatorRead() {
  var result = yield getFileContext("demo.txt");
  return result;
}
var gen = generatorRead().next();
gen.value.then(data => {
  console.log("generator", data)
});
}

6、async/await

1
2
3
4
5
6
//  async
async function asyncRead() {
  var result = await getFileContext("demo.txt");
  console.log("async", result);
}
asyncRead();

参考：
https://developer.mozilla.org/zh-CN/docs/learn/JavaScript/%E5%BC%82%E6%AD%A5
https://zhuanlan.zhihu.com/p/26567159
https://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html