阅读 3902

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

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

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

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

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

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

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

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

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");
					});
				};
			}
复制代码

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

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

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

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

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

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

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

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

我们来编写一个基于thunk函数的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:

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自动执行的核心代码

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的方式交出

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

关注下面的标签,发现更多相似文章
评论