async await 运用+根底+原理

async/await用法

其实你要完成一个东西之前，最好是先搞清楚这两样东西

这个东西有什么用？
这个东西是怎样用的？

有什么用？

async/await的用处便是：用同步办法，履行异步操作，怎样说呢？举个比方
比方我现在有一个需求：先恳求完接口1，再去恳求接口2，咱们通常会这么做

function request(num) { // 模仿接口恳求
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(num * 2)
    }, 1000)
  })
}
request(1).then(res1 => {
  console.log(res1) // 1秒后 输出 2
  request(2).then(res2 => {
    console.log(res2) // 2秒后 输出 4
  })
})

或许我现在又有一个需求：先恳求完接口1，再拿接口1回来的数据，去作为接口2的恳求参数，那咱们也能够这么做

request(5).then(res1 => {
  console.log(res1) // 1秒后 输出 10
  request(res1).then(res2 => {
    console.log(res2) // 2秒后 输出 20
  })
})

其实这么做是没问题的，可是假如嵌套的多了，不免有点不雅观，这个时分就能够用async/await来解决了

async function fn () {
  const res1 = await request(5)
  const res2 = await request(res1)
  console.log(res2) // 2秒后输出 20
}
fn()

是怎样用？

仍是用刚刚的比方
需求一：

async function fn () {
  await request(1)
  await request(2)
  // 2秒后履行完
}
fn()

需求二：

async function fn () {
  const res1 = await request(5)
  const res2 = await request(res1)
  console.log(res2) // 2秒后输出 20
}
fn()

其实就类似于日子中的排队，咱们日子中排队买东西，肯定是要上一个人买完，才轮到下一个人。而上面也一样，在async函数中，await规则了异步操作只能一个一个排队履行，然后到达用同步办法，履行异步操作的作用，这儿留意了：await只能在async函数中运用，否则会报错哦
刚刚上面的比方await后边都是跟着异步操作Promise，那假如不接Promise会怎样样呢？

function request(num) { // 去掉Promise
  setTimeout(() => {
    console.log(num * 2)
  }, 1000)
}
async function fn() {
  await request(1) // 2
  await request(2) // 4
  // 1秒后履行完  一起输出
}
fn()

能够看出，假如await后边接的不是Promise的话，有可能其实是达不到排队的作用的
说完await，咱们聊聊async吧，async是一个位于function之前的前缀，只需async函数中，才干运用await。那async履行完是回来一个什么东西呢？

async function fn () {}
console.log(fn) // [AsyncFunction: fn]
console.log(fn()) // Promise{<fulfilled>: undefined}

能够看出，async函数履行完会主动回来一个状态为fulfilled的Promise(不一定是成功态，可是肯定是个promise)，也便是成功状态，可是值却是undefined，那要怎样才干使值不是undefined呢？很简略，函数有return回来值就行了

async function fn (num) {
  return num
}
console.log(fn) // [AsyncFunction: fn]
console.log(fn(10)) // Promise{<fulfilled>: 10}
fn(10).then(res => console.log(res)) // 10

能够看出，此刻就有值了，而且还能运用then办法进行输出

总结

总结一下async/await的知识点

• await只能在async函数中运用，否则会报错
• async函数回来的是一个Promise目标，有无值看有无return值
• await后边最好是接Promise，尽管接其他值也能到达排队作用
• async/await作用是用同步办法，履行异步操作

什么是语法糖？

前面说了，async/await是一种语法糖，诶！很多同学就会问，啥是语法糖呢？我个人了解便是，语法糖便是一个东西，这个东西你就算不必他，你用其他手段也能到达这个东西相同的作用，可是可能就没有这个东西这么方便了。

回归正题，async/await是一种语法糖，那就阐明用其他办法其实也能够完成他的作用，咱们今天便是讲一讲怎样去完成async/await，用到的是ES6里的迭代函数——generator函数

generator函数

基本用法

generator函数跟普通函数在写法上的差异便是，多了一个星号*，而且只需在generator函数中才干运用yield，什么是yield呢，他相当于generator函数履行的半途暂停点，比方下方有3个暂停点。而怎样才干暂停后持续走呢？那就得运用到next办法，next办法履行后会回来一个目标，目标中有value 和 done两个特点

• value：暂停点后边接的值，也便是yield后边接的值
• done：是否generator函数已走完，没走完为false，走完为true

function* gen() {
  yield 1
  yield 2
  yield 3
}
const g = gen()
console.log(g.next()) // { value: 1, done: false }
console.log(g.next()) // { value: 2, done: false }
console.log(g.next()) // { value: 3, done: false }
console.log(g.next()) // { value: undefined, done: true }

能够看到最终一个是undefined，这取决于你generator函数有无回来值

function* gen() {
  yield 1
  yield 2
  yield 3
  return 4
}
const g = gen()
console.log(g.next()) // { value: 1, done: false }
console.log(g.next()) // { value: 2, done: false }
console.log(g.next()) // { value: 3, done: false }
console.log(g.next()) // { value: 4, done: true }

yield后边接函数

yield后边接函数的话，到了对应暂停点yield，会马上履行此函数，而且该函数的履行回来值，会被作为此暂停点目标的value

function fn(num) {
  console.log(num)
  return num
}
function* gen() {
  yield fn(1)
  yield fn(2)
  return 3
}
const g = gen()
console.log(g.next()) 
// 1
// { value: 1, done: false }
console.log(g.next())
// 2
//  { value: 2, done: false }
console.log(g.next()) 
// { value: 3, done: true }

yield后边接Promise

前面说了，函数履行回来值会作为暂停点目标的value值，那么下面比方就能够了解了，前两个的value都是pending状态的Promise目标

function fn(num) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(num)
    }, 1000)
  })
}
function* gen() {
  yield fn(1)
  yield fn(2)
  return 3
}
const g = gen()
console.log(g.next()) // { value: Promise { <pending> }, done: false }
console.log(g.next()) // { value: Promise { <pending> }, done: false }
console.log(g.next()) // { value: 3, done: true }

其实咱们想要的成果是，两个Promise的成果1 和 2，那怎样做呢？很简略，运用Promise的then办法就行了

const g = gen()
const next1 = g.next()
next1.value.then(res1 => {
  console.log(next1) // 1秒后输出 { value: Promise { 1 }, done: false }
  console.log(res1) // 1秒后输出 1
  const next2 = g.next()
  next2.value.then(res2 => {
    console.log(next2) // 2秒后输出 { value: Promise { 2 }, done: false }
    console.log(res2) // 2秒后输出 2
    console.log(g.next()) // 2秒后输出 { value: 3, done: true }
  })
})

next函数传参

generator函数能够用next办法来传参，而且能够经过yield来接纳这个参数，留意两点

• 第一次next传参是没用的，只需从第二次开端next传参才有用
• next传值时，要记住次序是，先右边yield，后左面接纳参数

function* gen() {
  const num1 = yield 1
  console.log(num1)
  const num2 = yield 2
  console.log(num2)
  return 3
}
const g = gen()
console.log(g.next()) // { value: 1, done: false }
console.log(g.next(11111))
// 11111
//  { value: 2, done: false }
console.log(g.next(22222)) 
// 22222
// { value: 3, done: true }

Promise+next传参

前面讲了

yield后边接Promise
next函数传参

那这两个组合起来会是什么样呢？

function fn(nums) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(nums * 2)
    }, 1000)
  })
}
function* gen() {
  const num1 = yield fn(1)
  const num2 = yield fn(num1)
  const num3 = yield fn(num2)
  return num3
}
const g = gen()
const next1 = g.next()
next1.value.then(res1 => {
  console.log(next1) // 1秒后一起输出 { value: Promise { 2 }, done: false }
  console.log(res1) // 1秒后一起输出 2
  const next2 = g.next(res1) // 传入前次的res1
  next2.value.then(res2 => {
    console.log(next2) // 2秒后一起输出 { value: Promise { 4 }, done: false }
    console.log(res2) // 2秒后一起输出 4
    const next3 = g.next(res2) // 传入前次的res2
    next3.value.then(res3 => {
      console.log(next3) // 3秒后一起输出 { value: Promise { 8 }, done: false }
      console.log(res3) // 3秒后一起输出 8
       // 传入前次的res3
      console.log(g.next(res3)) // 3秒后一起输出 { value: 8, done: true }
    })
  })
})

完成 async await

其实上方的generator函数的Promise+next传参，就很像async/await了，差异在于

• gen函数履行回来值不是Promise，asyncFn履行回来值是Promise
• gen函数需求履行相应的操作，才干等同于asyncFn的排队作用
• gen函数履行的操作是不完善的，由于并不确认有几个yield，不确认会嵌套几回

那咱们怎样办呢？咱们能够封装一个高阶函数，接纳一个generator函数，并经过一系列处理，回来一个具有async函数功用的函数

function generatorToAsync(generatorFn) {
  // 经过一系列处理
  return 具有async函数功用的函数
}

回来值Promise

之前咱们说到，async函数的履行回来值是一个Promise，那咱们要怎样完成相同的成果呢

function* gen() {
}
const asyncFn = generatorToAsync(gen)
console.log(asyncFn()) // 期望这儿输出 Promise

其实很简略，generatorToAsync函数里做一下处理就行了

function* gen() {
}
function generatorToAsync (generatorFn) {
  return function () {
    return new Promise((resolve, reject) => {
    })
  }
}
const asyncFn = generatorToAsync(gen)
console.log(asyncFn()) // Promise

参加一系列操作

咱们把之前的处理代码，参加generatorToAsync函数中

function fn(nums) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(nums * 2)
    }, 1000)
  })
}
function* gen() {
  const num1 = yield fn(1)
  const num2 = yield fn(num1)
  const num3 = yield fn(num2)
  return num3
}
function generatorToAsync(generatorFn) {
  return function () {
    return new Promise((resolve, reject) => {
      const g = generatorFn()
      const next1 = g.next()
      next1.value.then(res1 => {
        const next2 = g.next(res1) // 传入前次的res1
        next2.value.then(res2 => {
          const next3 = g.next(res2) // 传入前次的res2
          next3.value.then(res3 => {
            // 传入前次的res3
            resolve(g.next(res3).value)
          })
        })
      })
    })
  }
}
const asyncFn = generatorToAsync(gen)
asyncFn().then(res => console.log(res)) // 3秒后输出 8

能够发现，咱们其完成已完成了以下的async/await的成果了

async function asyncFn() {
  const num1 = await fn(1)
  const num2 = await fn(num1)
  const num3 = await fn(num2)
  return num3
}
asyncFn().then(res => console.log(res)) // 3秒后输出 8

完善代码

上面的代码其实都是死代码，由于一个async函数中可能有2个await，3个await，5个await
，其实await的个数是不确认的。相同类比，generator函数中，也可能有2个yield，3个yield，5个yield，所以咱们得把代码写成活的才行

function generatorToAsync(generatorFn) {
  return function() {
    const gen = generatorFn.apply(this, arguments) // gen有可能传参
    // 回来一个Promise
    return new Promise((resolve, reject) => {
      function go(key, arg) {
        let res
        try {
          res = gen[key](arg) // 这儿有可能会履行回来reject状态的Promise
        } catch (error) {
          return reject(error) // 报错的话会走catch，直接reject
        }
        // 解构取得value和done
        const { value, done } = res
        if (done) {
          // 假如done为true，阐明走完了，进行resolve(value)
          return resolve(value)
        } else {
          // 假如done为false，阐明没走完，还得持续走
          // value有可能是：常量，Promise，Promise有可能是成功或许失败
          return Promise.resolve(value).then(val => go('next', val), err => go('throw', err))
        }
      }
      go("next") // 第一次履行
    })
  }
}
const asyncFn = generatorToAsync(gen)
asyncFn().then(res => console.log(res))

这样的话，无论是多少个yield都会排队履行了，咱们把代码写成活的了

示例

async/await版别

async function asyncFn() {
  const num1 = await fn(1)
  console.log(num1) // 2
  const num2 = await fn(num1)
  console.log(num2) // 4
  const num3 = await fn(num2)
  console.log(num3) // 8
  return num3
}
const asyncRes = asyncFn()
console.log(asyncRes) // Promise
asyncRes.then(res => console.log(res)) // 8

运用generatorToAsync函数的版别

function* gen() {
  const num1 = yield fn(1)
  console.log(num1) // 2
  const num2 = yield fn(num1)
  console.log(num2) // 4
  const num3 = yield fn(num2)
  console.log(num3) // 8
  return num3
}
const genToAsync = generatorToAsync(gen)
const asyncRes = genToAsync()
console.log(asyncRes) // Promise
asyncRes.then(res => console.log(res)) // 8

参考
/post/700703…

async await ssh

常常有人说async函数是generator函数的语法糖，那么到底是怎样样一个糖呢？让咱们来一层层的剥开它的糖衣。
有的同学想说，已然用了generator函数何必还要完成async呢？
这篇文章的意图便是带咱们了解清楚async和generator之间到底是怎么相互协作，管理异步的。

// 示例

const getData = () => new Promise(resolve => setTimeout(() => resolve("data"), 1000))
async function test() {
const data = await getData()
console.log('data: ', data);
const data2 = await getData()
console.log('data2: ', data2);
return 'success'
}
// 这样的一个函数 应该再1秒后打印data 再过一秒打印data2 最终打印success
test().then(res => console.log(res))

关于这个简略的事例来说，假如咱们把它用generator函数表达，会是怎样样的呢？

function* testG() {
// await被编译成了yield
const data = yield getData()
console.log('data: ', data);
const data2 = yield getData()
console.log('data2: ', data2);
return 'success'
}
// 咱们知道，generator函数是不会主动履行的，每一次调用它的next办法，会停留在下一个yield的位置。
// 利用这个特性，咱们只需编写一个主动履行的函数，就能够让这个generator函数完全完成async函数的功用。
const getData = () => new Promise(resolve => setTimeout(() => resolve("data"), 1000))
var test = asyncToGenerator(
function* testG() {
// await被编译成了yield
const data = yield getData()
console.log('data: ', data);
const data2 = yield getData()
console.log('data2: ', data2);
return 'success'
}
)
test().then(res => console.log(res))

那么大体上的思路现已确认了，
asyncToGenerator承受一个generator函数，回来一个promise，
要害就在于，里面用yield来区分的异步流程，应该怎么主动履行

假如是手动履行

在编写这个函数之前，咱们先模仿手动去调用这个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函数规划的一个比较难了解的点，可是为了完成咱们的目标，仍是得去学习它~
// 凭借这个特性，假如咱们这样去控制yield的流程，是不是就能完成异步串行了？
function* testG() {
// await被编译成了yield
const data = yield getData()
console.log('data: ', data);
const data2 = yield getData()
console.log('data2: ', data2);
return 'success'
}
var gen = testG()
var dataPromise = gen.next()
console.log(dataPromise)
dataPromise.value.then((value1) => {
// data1的value被拿到了 持续调用next而且传递给data
var data2Promise = gen.next(value1)
// console.log('data: ', data);
// 此刻就会打印出data
data2Promise.value.then((value2) => {
// data2的value拿到了 持续调用next而且传递value2
gen.next(value2)
// console.log('data2: ', data2);
// 此刻就会打印出data2
})
})
// 这样的一个看着像callback hell的调用，就能够让咱们的generator函数把异步组织的明明白白。

完成

// 有了这样的思路，完成这个高阶函数就变得很简略了。
// 先全体看一下结构，有个印象，然后咱们逐行注释讲解。

function asyncToGenerator (generatorFunc) {
    return function () {
        const gen = generatorFunc.apply(this, arguments)
        return new Promise((resolve, reject) => {
            function step(key, arg) {
                let generatorResult
                try {  
                    generatorResult = gen[key](arg)
                } catch {
                    return reject(error)
                }
                const {value, done} = generatorResult
                if (done) {
                    return resolve(value)
                } else {
                    return Promise.resolve(value).then(val => step('next', val), err => step('throw',err))
                }
            }
            step('next')
        })
    }
}

接下来逐行讲解。

function asyncToGenerator(generatorFunc) {
// 回来的是一个新的函数
return function() {
// 先调用generator函数 生成迭代器
// 对应 var gen = testG()
const gen = generatorFunc.apply(this, arguments)
// 回来一个promise 由于外部是用.then的办法 或许await的办法去运用这个函数的回来值的
// var test = asyncToGenerator(testG)
// test().then(res => console.log(res))
return new Promise((resolve, reject) => {
// 内部界说一个step函数 用来一步一步的跨过yield的阻碍
// key有next和throw两种取值，分别对应了gen的next和throw办法
// arg参数则是用来把promise resolve出来的值交给下一个yield
function step(key, arg) {
let generatorResult
// 这个办法需求包裹在try catch中
// 假如报错了 就把promise给reject掉 外部经过.catch能够获取到错误
try {
generatorResult = gen[key](arg)
} catch (error) {
return reject(error)
}
// gen.next() 得到的成果是一个 { value, done } 的结构
const { value, done } = generatorResult
if (done) {
// 假如现已完成了 就直接resolve这个promise
// 这个done是在最终一次调用next后才会为true
// 以本文的比方来说 此刻的成果是 { done: true, value: 'success' }
// 这个value也便是generator函数最终的回来值
return resolve(value)
} else {
// 除了最终完毕的时分外，每次调用gen.next()
// 其实是回来 { value: Promise, done: false } 的结构，
// 这儿要留意的是Promise.resolve能够承受一个promise为参数
// 而且这个promise参数被resolve的时分，这个then才会被调用
return Promise.resolve(
// 这个value对应的是yield后边的promise
value
).then(
// value这个promise被resove的时分，就会履行next
// 而且只需done不是true的时分 就会递归的往下解开promise
// 对应gen.next().value.then(value => {
// gen.next(value).value.then(value2 => {
// gen.next()
//
// // 此刻done为true了 整个promise被resolve了
// // 最外部的test().then(res => console.log(res))的then就开端履行了
// })
// })
function onResolve(val) {
step("next", val)
},
// 假如promise被reject了 就再次进入step函数
// 不同的是，这次的try catch中调用的是gen.throw(err)
// 那么自然就被catch到 然后把promise给reject掉啦
function onReject(err) {
step("throw", err)
},
)
}
}
step("next")
})
}
}

// 本文用最简略的办法完成了asyncToGenerator这个函数，这是babel编译async函数的中心，当然在babel中，generator函数也被编译成了一个很原始的方式，本文咱们直接以generator替代。

ES6 系列之 Babel 将 Async 编译成了什么姿态

本文便是简略介绍下 Async 语法编译后的代码。
Async

const fetchData = (data) => new Promise((resolve) => setTimeout(resolve, 1000, data + 1))
const fetchValue = async function () {
var value1 = await fetchData(1);
var value2 = await fetchData(value1);
var value3 = await fetchData(value2);
console.log(value3)
};
fetchValue();
// 大约 3s 后输出 4

Babel

// 咱们直接在 Babel 官网的 Try it out 张贴上述代码，然后检查代码编译成什么姿态：

"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");
});
};
}
var fetchData = function fetchData(data) {
return new Promise(function(resolve) {
return setTimeout(resolve, 1000, data + 1);
});
};
var fetchValue = (function() {
var _ref = _asyncToGenerator(
/*#__PURE__*/ regeneratorRuntime.mark(function _callee() {
var value1, value2, value3;
return regeneratorRuntime.wrap(
function _callee$(_context) {
while (1) {
switch ((_context.prev = _context.next)) {
case 0:
_context.next = 2;
return fetchData(1);
case 2:
value1 = _context.sent;
_context.next = 5;
return fetchData(value1);
case 5:
value2 = _context.sent;
_context.next = 8;
return fetchData(value2);
case 8:
value3 = _context.sent;
console.log(value3);
case 10:
case "end":
return _context.stop();
}
}
},
_callee,
this
);
})
);
return function fetchValue() {
return _ref.apply(this, arguments);
};
})();
fetchValue();

_asyncToGenerator

这次咱们重点来看看 _asyncToGenerator 函数：

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");
});
};
}

以上这段代码主要是用来完成 generator 的主动履行以及回来 Promise。
当咱们履行 fetchValue() 的时分，履行的其实便是 _asyncToGenerator 回来的这个匿名函数，在匿名函数中，咱们履行了

var gen = fn.apply(this, arguments);
// 这一步就相当于履行 Generator 函数，举个比方：
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();

var gen = fn.apply(this, arguments) 就相当于 var hw = helloWorldGenerator();，回来的 gen 是一个具有 next()、throw()、return() 办法的目标。
// 然后咱们回来了一个 Promise 目标，在 Promise 中，咱们履行了 step(“next”)，step 函数中会履行：

try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
// step("next") 就相当于 var info = gen.next()，回来的 info 目标是一个具有 value 和 done 特点的目标：
// {value: Promise, done: false}
// 接下来又会履行：
if (info.done) {
resolve(value);
} else {
return Promise.resolve(value).then(
function(value) {
step("next", value);
},
function(err) {
step("throw", err);
}
);
}

value 此刻是一个 Promise，Promise.resolve(value) 仍然会回来这个 Promise，咱们给这个 Promise 添加了一个 then 函数，用于在 Promise 有成果时履行，有成果时又会履行 step(“next”, value)，然后使得 Generator 持续履行，直到 info.done 为 true，才会 resolve(value)。

// 不完整但可用的代码

(function() {
var ContinueSentinel = {};
var mark = function(genFun) {
var generator = Object.create({
next: function(arg) {
return this._invoke("next", arg);
}
});
genFun.prototype = generator;
return genFun;
};
function wrap(innerFn, outerFn, self) {
var generator = Object.create(outerFn.prototype);
var context = {
done: false,
method: "next",
next: 0,
prev: 0,
sent: undefined,
abrupt: function(type, arg) {
var record = {};
record.type = type;
record.arg = arg;
return this.complete(record);
},
complete: function(record, afterLoc) {
if (record.type === "return") {
this.rval = this.arg = record.arg;
this.method = "return";
this.next = "end";
}
return ContinueSentinel;
},
stop: function() {
this.done = true;
return this.rval;
}
};
generator._invoke = makeInvokeMethod(innerFn, context);
return generator;
}
function makeInvokeMethod(innerFn, context) {
var state = "start";
return function invoke(method, arg) {
if (state === "completed") {
return { value: undefined, done: true };
}
context.method = method;
context.arg = arg;
while (true) {
state = "executing";
if (context.method === "next") {
context.sent = context._sent = context.arg;
}
var record = {
type: "normal",
arg: innerFn.call(self, context)
};
if (record.type === "normal") {
state = context.done ? "completed" : "yield";
if (record.arg === ContinueSentinel) {
continue;
}
return {
value: record.arg,
done: context.done
};
}
}
};
}
window.regeneratorRuntime = {};
regeneratorRuntime.wrap = wrap;
regeneratorRuntime.mark = mark;
})();
"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");
});
};
}
var fetchData = function fetchData(data) {
return new Promise(function(resolve) {
return setTimeout(resolve, 1000, data + 1);
});
};
var fetchValue = (function() {
var _ref = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee() {
var value1, value2, value3;
return regeneratorRuntime.wrap(
function _callee$(_context) {
while (1) {
switch ((_context.prev = _context.next)) {
case 0:
_context.next = 2;
return fetchData(1);
case 2:
value1 = _context.sent;
_context.next = 5;
return fetchData(value1);
case 5:
value2 = _context.sent;
_context.next = 8;
return fetchData(value2);
case 8:
value3 = _context.sent;
console.log(value3);
case 10:
case "end":
return _context.stop();
}
}
},
_callee,
this
);
})
);
return function fetchValue() {
return _ref.apply(this, arguments);
};
})();
fetchValue();

上边两个章节中最重要的便是这个

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");
  });
  };
}