generator生成器和promise配合实现看似同步的异步流程控制(async和await)

本文主要是介绍generator生成器和promise配合实现看似同步的异步流程控制(async和await)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文来自于 <你不知道的Javascript> 学习笔记
生成器函数返回的是迭代器,在内部每个yield的是promise,当迭代器启动后,it.next().value就是promise,在promise的then中不断的递归执行 it.next(data) 方法,其中data就是每个promise resolve的值.

es7的async和await相当于就是把这个流程写进了语法层面.async函数相当于生成器,await 相当于 yield

function foo() {return new Promise((resolve) => {setTimeout(() => {resolve('一层 promise resolve的值')}, 1000)})
}function bar() {return new Promise(resolve => {setTimeout(() => {resolve(new Promise(resolve => {resolve('两层 promise resolve 的值')}))}, 1000)})
}function syncFn() {return '同步函数返回的值'
}// 这里相当于 async 函数
function* main() {try {console.log('1', yield foo()) // yield 相当于 await console.log('2', yield bar())} catch (err) {console.log(err)}console.log('3', yield syncFn())return 'inner value'}// 该函数用于自动执行 generator 函数返回的迭代器的 next 方法,直到 done, 在 yield 后面的 promise 的回调中执行 it.next, 递归执行.
function runGenFn(genFn) {const it = genFn()return new Promise(resolve => {// 递归执行迭代器,将 promise resolve 的值传递进生成器里的 yield const _runIt = (it, data) => {const { value, done } = it.next(data)if (!done) {toPlainPromise(value).then(_data => {// console.log('hhh')_runIt(it, _data)})} else {toPlainPromise(value).then(_data => {resolve(_data)})}}const isPromise = (v): v is Promise<any> => {return Object.prototype.toString.call(v) == '[object Promise]'}// 解析多层 promise,返回只有一层的 promiseconst toPlainPromise = (p) => {const resolveNestPromise = (p, resolve) => {if (isPromise(p)) {p.then(value => {// 此处的value可能还是promiseresolveNestPromise(value, resolve)})} else {resolve(p)}}return new Promise(resolve => {resolveNestPromise(p, resolve)})}_runIt(it, undefined)})}runGenFn(main).then(data => {console.log('main 生成器返回的值::>>', data)
})