簡單理解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)
複製代碼