async await原理

async await原理

async await
用 babel 编译成 es5 的版本

async function test() {
	await new Promise((res) => {
		setTimeout(res, 1000);
	});
	await test();
}

首先思考，当我执行 test 后会如何？
所有函数都会一干到底。所以为了在每个 await 停下来，必须要把 test 函数拆分成多个函数:

function test(){

}
function test_p1(){
	return new Promise(res=>{
        setTimeout(res,1000)
    })
}
function test_p2(){
    test()
}

test 应该做什么？
test 应该返回一个 promise 表示是否执行完毕。

function test() {
	return new Promise(function (res) {
		res();
	});
}

紧接着，promise 的状态控制回调 res 何时调用？
答案是 test_p1 test_p2 状态都发生变更后调用。

所以我们需要监控 test_p1 test_p2 状态。
因为有多个 promise 所以我们需要用一个栈结构来存所有的 promise。
我们统一管理这个栈结构，而整个结构的状态就是 我们要监控的。

/* 统一管理promise，同步转异步 */
function execute(p_list) {
	p_list[0].then(function () {
		execute(p_list.slice(1));
	});
}

我们可以把 res 塞给 execute，在 test 中启动 execute。最终:

function execute(p_list, res) {
	if (p_list.length === 0) {
		/* 所有的await语句（拆解后的异步函数）执行完毕 */
		return res();
	}
	p_list[0].then(function () {
		execute(p_list.slice(1));
	});
}

function test_p1(){
	return new Promise(res=>{
        setTimeout(res,1000)
    })
}
function test_p2(){
    test()
}
function test() {
	return new Promise(function (res) {
		execute([test_p1, test_p2], res);
	});
}

参考

1. bable