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

时间 2019-11-22

标签简单理解 async await 语法实现原理栏目 Java 繁體版

原文原文链接

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

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

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

async function fn(args) {
  // ...
}

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

全部的async函数均可以写成上面的第二种形式，其中的spawn函数就是自动执行器。javascript

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

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

<!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转换后的

async function fns(args) {
				const res = await fetch('google.com');
				return res.text();
			}
复制代码

'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);
				}));

				return function fns(_x) {
					return _ref.apply(this, arguments);
				};
			}();

			function _asyncToGenerator(fn) {  //Generator函数自动执行
				return function() {
					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");
					});
				};
			}
复制代码

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

var readFile = function (fileName) {
    return function (callback) {
        return fs.readFile(fileName, callback)
    }
}
复制代码

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

readFile('./package.json')((err, str) => {
    console.log(str.toString())
})
复制代码

问: thunk的执行比普通函数要麻烦很多，那么它有什么优点呢？es6

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

而不是将异步操做结果传入thunk函数自己的做用域内，这点很重要，由于它能结合Generator语法让Generator函数自动执行json

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

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

let gen = function* () {
    let r1 = yield readFile('./package.json')
    console.log(r1.toString())
    let r2 = yield readFile('./index.js')
    console.log(r2.toString())
}
复制代码

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

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。前端框架

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

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

其调用代码为:

run(gen)
复制代码

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

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

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

//包装返回Promise对象的函数
function readFile(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的方式交出