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