简单理解async、await语法实现原理

发表于

现在最新的前端框架生态都开始用上了Generator和yield，
有的甚至已经开始使用最新的async、await语法了，
这两样都是基于Generator自动执行的原理。

阮一峰 async-函数的实现原理

async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。

1
2
3
4
5
6
7
8
9
10
async function fn(args) {
  // ...
}

// 等同于
function fn(args) {
  return spawn(function* () {
    // ...
  });
}

所有的async函数都可以写成上面的第二种形式，其中的spawn函数就是自动执行器。

下面给出spawn函数的实现，基本就是前文自动执行器的翻版。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function spawn(genF) {
  return new Promise(function(resolve, reject) {
    const gen = genF();
    function step(nextF) {
      let next;
      try {
        next = nextF();
      } catch(e) {
        return reject(e);
      }
      if(next.done) {
        return resolve(next.value);
      }
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v); });
      }, function(e) {
        step(function() { return gen.throw(e); });
      });
    }
    step(function() { return gen.next(undefined); });
  });
}

DEMO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function timeout(ms) {
				return {
					text: 'done'
				}
			}

			function* start() {
				const res = yield timeout(1000);
				return res;
			};

		 
             

			function fn(args) {
				return spawn(start);
			}

			function spawn(genF) {
				return new Promise(function(resolve, reject) {
					const gen = genF();
					function step(nextF) {
						let next;
						try {
							next = nextF();
						} catch(e) {
							return reject(e);
						}
						if(next.done) {
							return resolve(next.value);
						}
						
					
						Promise.resolve(next.value).then(function(v) {
							step(function() {
								return gen.next(v);
							});
						}, function(e) {
							step(function() {
								return gen.throw(e);
							});
						});
					}
					step(function() {
						return gen.next();
					});
				});
			}

			 fn().then((data)=>{
				console.log(data)
			})
		</script>
	</head>

	<body>
	</body>

</html>

看下babel转换后的

1
2
3
4
async function fns(args) {
				const res = await fetch('google.com');
				return res.text();
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
'use strict';
    
		var fns = function() {
			var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(args) {
				var res;
				return regeneratorRuntime.wrap(function _callee$(_context) {
					while(1) {
						switch(_context.prev = _context.next) {
							case 0:
								_context.next = 2;
								return fetch('google.com');
    
							case 2:
								res = _context.sent;
								return _context.abrupt('return', res.text());
    
							case 4:
							case'end':
								return _context.stop();
						}
					}
				}, _callee, this);
			}));
    
			returnfunction fns(_x) {
				return _ref.apply(this, arguments);
			};
		}();
    
		function _asyncToGenerator(fn) {  //Generator函数自动执行
			returnfunction() {
				var gen = fn.apply(this, arguments);
				return new Promise(function(resolve, reject) {
					function step(key, arg) {
						try {
							var info = gen[key](arg);
							var value = info.value;
						} catch(error) {
							reject(error);
							return;
						}
						if(info.done) {
							resolve(value);
						} else {
							return Promise.resolve(value).then(function(value) {
								step("next", value);
							}, function(err) {
								step("throw", err);
							});
						}
					}
					return step("next");
				});
			};
		}

一、thunk函数
thunk函数指的是能将执行结果传入回调函数，并将该回调函数返回的函数。
是不是有点抽象，举个例子:

1
2
3
4
5
var readFile = function (fileName) {
    returnfunction (callback) {
        return fs.readFile(fileName, callback)
    }
}

下面我们来看下thunk函数怎样执行

1
2
3
readFile('./package.json')((err, str) => {
    console.log(str.toString())
})

问: thunk的执行比普通函数要麻烦不少，那么它有什么优势呢？

thunk函数的优势在于它能将异步操作返回结果的获取权交给thunk函数的返回值，

而不是将异步操作结果传入thunk函数本身的作用域内，这点很重要，
因为它能结合Generator语法让Generator函数自动执行

二、Generator
es6的Generator函数，具体语法这里就不介绍了，

我们来编写一个基于thunk函数的Generator：

1
2
3
4
5
6
let gen = function* () {
    let r1 = yield readFile('./package.json')
    console.log(r1.toString())
    let r2 = yield readFile('./index.js')
    console.log(r2.toString())
}

我们来手动执行一下这个Generator:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let g = gen()
let r1 = g.next()
r1.value(function (err, data) {
    if (err) {
        throw err
    }
    let r2 = g.next(data)
    r2.value(function (err, data) {
        if (err) {
            throw err
        }
        g.next(data)
    })
})

可以注意到，在我们手动执行基于thunk函数的Generator时，
有很多代码是可以复用的，
没错，所谓的Generator自动执行就是把这些可复用的部分封装成函数，
然后让它们递归执行，直到执行完所有的yield。

三、Generator自动执行器
下面就是Generator自动执行的核心代码

1
2
3
4
5
6
7
8
9
10
11
function run(fn) {
    let gen = fn()
    function next(err, data) {
        let result = gen.next(data)
        if (result.done) {
            return
        }
        result.value(next)
    }
    next()
}

可以看到无非就是把可复用的部分封装成next函数，然后让其递归执行，
直到执行完所有的yield

其调用代码为:

1
run(gen)

这样就将原本繁杂的异步操作封装的十分简单了

基于Promise的Generator的自动执行
上面的例子是基于thunk函数的，而即将出现的es7的async、await语法是基于Promise的

这里再上一个基于Promise的Generator的自动执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//包装返回Promise对象的函数
functionreadFile(fileName) {
    return new Promise((resolve, reject) => {
        fs.readFile(fileName, (error, data) => {
            if (error) {
                reject(error)
            } else {
                resolve(data)
            }
        })
    })
}
 
// 编写Generator
let gen = function* () {
    let r1 = yield readFile('./package.json')
    console.log(r1.toString())
    let r2 = yield readFile('./index.js')
    console.log(r2.toString())
}

// 编写Generator执行器
function run(gen) {
    let g = gen()
    function next(data) {
        let result = g.next(data)
        if (result.done) {
            return result.value
        }
        result.value.then((data) => next(data))
    }
    next()
}

//用Generator执行器自动执行
run(gen)

这个和基于thunk函数的大同小异，只是把函数返回值的获取权以Promise的方式交出

参考 简单理解Generator自执行及async、await语法原理