写在前面
此系列来源于开源项目：前端 100 问：能搞懂 80%的请把简历给我
为了备战 2021 春招
每天一题，督促自己
从多方面多角度总结答案，丰富知识
JS 异步解决方案的发展历程以及优缺点
正文回答
- 回调函数（callback）
setTimeout(() => {
// callback 函数体
}, 1000);
缺点：回调地狱，不能用 try catch 捕获错误，不能 return
回调地狱的根本问题在于：
- 缺乏顺序性： 回调地狱导致的调试困难，和大脑的思维方式不符
- 嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身，即（控制反转）
- 嵌套函数过多的多话，很难处理错误
ajax("XXX1", () => {
// callback 函数体
ajax("XXX2", () => {
// callback 函数体
ajax("XXX3", () => {
// callback 函数体
});
});
});
优点：解决了同步的问题（只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。）
- Promise
Promise 就是为了解决 callback 的问题而产生的。
Promise 实现了链式调用，也就是说每次 then 后返回的都是一个全新 Promise，如果我们在 then 中 return ，return 的结果会被 Promise.resolve() 包装
优点：解决了回调地狱的问题
ajax("XXX1")
.then((res) => {
// 操作逻辑
return ajax("XXX2");
})
.then((res) => {
// 操作逻辑
return ajax("XXX3");
})
.then((res) => {
// 操作逻辑
});
缺点：无法取消 Promise ，错误需要通过回调函数来捕获
- Generator
特点：可以控制函数的执行，可以配合 co 函数库使用
function* fetch() {
yield ajax("XXX1", () => {});
yield ajax("XXX2", () => {});
yield ajax("XXX3", () => {});
}
let it = fetch();
let result1 = it.next();
let result2 = it.next();
let result3 = it.next();
- Async/await
async、await 是异步的终极解决方案
优点是：代码清晰，不用像 Promise 写一大堆 then 链，处理了回调地狱的问题
缺点：await 将异步代码改造成同步代码，如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。
async function test() {
// 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
// 如果有依赖性的话，其实就是解决回调地狱的例子了
await fetch("XXX1");
await fetch("XXX2");
await fetch("XXX3");
}
下面来看一个使用 await 的例子：
let a = 0;
let b = async () => {
a = a + (await 10);
console.log("2", a); // -> '2' 10
};
b();
a++;
console.log("1", a); // -> '1' 1
对于以上代码你可能会有疑惑，让我来解释下原因
- 首先函数 b 先执行，在执行到 await 10 之前变量 a 还是 0，因为 await 内部实现了 generator ，generator 会保留堆栈中东西，所以这时候 a = 0 被保存了下来
- 因为 await 是异步操作，后来的表达式不返回 Promise 的话，就会包装成 Promise.reslove(返回值)，然后会去执行函数外的同步代码
- 同步代码执行完毕后开始执行异步代码，将保存下来的值拿出来使用，这时候 a = 0 + 10
上述解释中提到了 await 内部实现了 generator，其实 await 就是 generator 加上 Promise 的语法糖，且内部实现了自动执行 generator。如果你熟悉 co 的话，其实自己就可以实现这样的语法糖。
另外 await 的例子其实可以转换为
var a = 0;
var b = () => {
var temp = a;
Promise.resolve(10)
.then((r) => {
a = temp + r;
})
.then(() => {
console.log("2", a);
});
};
b();
a++;
console.log("1", a);