手写20行代码实现async await，web前端在线开发

如果是手动执行

---

在编写这个函数之前，我们先模拟手动去调用这个generator函数去一步步的把流程走完，有助于后面的思考。

function* testG() {

// await被编译成了yield

const data = yield getData()

console.log('data: ', data);

const data2 = yield getData()

console.log('data2: ', data2);

return’success’

}

我们先调用testG生成一个迭代器

// 返回了一个迭代器

var gen = testG()

然后开始执行第一次next

// 第一次调用next 停留在第一个yield的位置

// 返回的promise里 包含了data需要的数据

var dataPromise = gen.next()

这里返回了一个promise，就是第一次getData()所返回的promise，注意

const data = yield getData()

这段代码要切割成左右两部分来看，第一次调用next，其实只是停留在了yield getData()这里，

data的值并没有被确定。

那么什么时候data的值会被确定呢？

下一次调用next的时候，传的参数会被作为上一个yield前面接受的值

也就是说，我们再次调用gen.next('这个参数才会被赋给data变量')的时候

data的值才会被确定为'这个参数才会被赋给data变量'

gen.next(‘这个参数才会被赋给data变量’)

// 然后这里的data才有值

const data = yield getData()

// 然后打印出data

console.log('data: ', data);

// 然后继续走到下一个yield

const data2 = yield getData()

然后往下执行，直到遇到下一个yield，继续这样的流程…

这是generator函