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