async await 实现原理 generator + yield + promise

generator函数

  • Generator 函数整体就是一个状态机，内部有多少个yield，就有多少个状态，当Generator函数执行的时候 其实是返回包含每次代码暂停执行的指针对象（遍历器对象Iterator），可以遍历 Generator的各种状态（Iterator.next 去移动指针可以使 Generator 函数分段执行）

  • {value:xxx,done:false || true},表示这个状态的返回值和一个表示这个遍历对象是否已经遍历到最后（状态机是否走完了所有的状态）

Iterator接口

typescript的接口描述如下：遍历器接口（Iterable）、指针对象（Iterator）和next方法返回值

interface Iterable {
  [Symbol.iterator]() : Iterator,
}

interface Iterator {
  next(value?: any) : IterationResult,
}

interface IterationResult {
  value: any,
  done: boolean,
}

  • 一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。

  • ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）

-ES6 的有些数据结构原生具备 Iterator 接口（比如数组），即不用任何处理，就可以被for...of循环遍历。原因在于，这些数据结构原生部署了Symbol.iterator属性（详见下文），另外一些数据结构没有（比如对象）。凡是部署了Symbol.iterator属性的数据结构，就称为部署了遍历器接口。调用这个接口，就会返回一个遍历器对象

调用 Iterator 接口的场合

  • （1）解构赋值 对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法。
  • （2）扩展运算符 扩展运算符（...）也会调用默认的 Iterator 接口。
  • （3）yield* yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。
let generator = function* () {
  yield 1;
  yield* [2,3,4];
  yield 5;
};

var iterator = generator();

iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }

for...in循环有几个缺点。

数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
某些情况下，for...in循环会以任意顺序遍历键名。
总之，for...in循环主要是为遍历对象而设计的，不适用于遍历数组。
看了好几遍阮一峰的es6语法才看懂
Generator 函数返回一个遍历器 这个遍历器提供 next() 方法来控制Generator函数的执行，暂停 。
yield 表达式 暂停的标志

简易版本的Generator函数遍历器自执行函数：

// 协程 callback版本
var timeout = (time)=>{
  return (callbck)=>{
       setTimeout(()=>{
      console.log('time',time)
      callbck()
    },time)
  }
}



// Generator 遍历器生成函数
function* callbackGenerator() {
  var res = yield timeout(2000) // 使得 yield 的value 是一个callback 自执行递归 使下一次的next在callback里面执行
  var res1 = yield timeout(2000)
}



// callback版本  版本自执行函数
function run (Generator) {
  var hw = Generator();
 const  next = ()=>{
   const aa = hw.next()
   if(!aa.done){
    aa.value(next) 
   }else{
     return true
   }
 }
 next()
}



run(callbackGenerator)


// 协程 promise 版本
var timeout = (time)=>{
  return new Promise((resolve)=>{
       setTimeout(()=>{
      console.log('time',time)
      resolve(time+2000)
    },time)
  })
}



// Generator 遍历起器生成函数
function* callbackGenerator() {
  var res = yield timeout(2000) // 使得 yield 的value是promise 自执行时把下一次的next在then里面执行
  var res1 = yield timeout(res)
}



// promise版本 版本自执行函数
function run (Generator) {
  var hw = Generator();
 const  next = (query)=>{
   var aa = hw.next(query)
   if(!aa.done){
    aa.value.then(next) 
   }else{
     return true
   }
 }
 next()
}



run(callbackGenerator)

核心思想：利用generator遍历器生成器函数的分段执行 ，只有在遍历器对象 执行next方法之后交出了控制权 ，在完成后 callback || promise.then()里面调用下一次next的时候又继续恢复控制权这个功能来实现的

async await 正式利用了这一点

  • yield 表达式交出控制权

两种方法可以做到这一点。
（1）回调函数。将异步操作包装成 Thunk 函数，在回调函数里面交回执行权。

（2）Promise 对象。将异步操作包装成 Promise 对象，用then方法交回执行权。
from http://es6.ruanyifeng.com/#docs/generator-async

  • 使generator遍历器函数自执行

es7 async await 异步写法

function sleep(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms);
  });
}

async function test() {
  for (let i = 0; i < 10; i++) {
    await sleep(100);
  }
}

转化成es6是下边这样
async await 实际上是由 generator + yield 控制流程 + promise 实现回调

// _asyncToGenerator 顾名思义转换async to Generator

  • 转换 await 为 yield
  • 转换 async 为 Generator
  • 调用test之前 _asyncToGenerator函数 已经执行,并传递了一个fn （Generator）给匿名的执行函数
  • 实际上 调用test之前， test方法已经变成了一个 实现 Generator 遍历器生成函数自执行的 方法
  • 调用test 递归执行step
    • 调用next的来执行遍历器
    • 每次执行返回一个promise
    • promise的then方法里执行next方法）
  • 使得Generator 遍历器自动 执行， 从而达到异步
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) {
            return step("next", value);
          },
            function (err) {
              return step("throw", err);
            });
        }
      }
      return step("next");
    });
  };
}

function sleep(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms);
  });
}

let test = function () {
  var ref = _asyncToGenerator(function* () {
    for (let i = 0; i < 10; i++) {
      yield sleep(100);
    }
  });

  return function test() {
    return ref.apply(this, arguments);
  };
}();
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,524评论 5赞 460
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,869评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,813评论 0赞 320
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,210评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,085评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,117评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,533评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,219评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,487评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,218评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,589评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2赞 335