當您使用async
關鍵字,你是隱式返回的任何類型的你實際上是在功能的return
語句中使用(在這種情況下,不必返回任何一個Promise
,所以這是一個簡單的沒有一個Promise
,或Promise<void>
如果你在TypeScript中)。
在內部,使用async/await
的函數可以展開到多個異步延續中,並在關鍵字await
的每次使用中進行拆分。當您承諾完成await
時,該功能的其餘部分將恢復。瞭解像Babel這樣的譯員如何展開你的代碼可能是有益的。
此代碼:
function asyncOperation() {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 123);
});
}
async() => {
await asyncOperation();
}
被transpiled爲純ES5爲:
"use strict";
function _asyncToGenerator(fn) { 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"); }); }; }
function asyncOperation() {
return new Promise(function (resolve) {
setTimeout(function() {
resolve();
}, 123);
});
}
_asyncToGenerator(regeneratorRuntime.mark(function _callee() {
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return asyncOperation();
case 2:
case "end":
return _context.stop();
}
}
}, _callee, undefined);
}));
說難聽_asyncToGenerator
調用曾經是你美麗的異步功能。它已被展開成明確的延續(you can try爲函數添加更多等待點和邏輯並查看傳輸代碼如何更改)。