卓越新闻
您所在的位置:首页 > 卓越新闻 > 前端异步代码如何解决

前端异步代码如何解决

来源:中软卓越 日期:2018-07-24 11:17 人气:
标签:

早前有针对 Promise 的语法写过博文,不过仅限入门级别,浅尝辄止食而无味。后面一直想写 Promise 实现,碍于理解程度有限,多次下笔未能满意。一拖再拖,时至今日。

随着 Promise/A+规范、ECMAScript规范 对 Promise API 制定执行落地,Javascript 异步操作的基本单位也逐渐从 callback 转换到 promise。绝大多数 JavaScript/DOM平台新增的异步API( Fetch、 Serviceworker)也都是基于 Promise构建的。这其中对 Promise理解不是仅看过 API,读过几篇实践就能完全掌握的。笔者以此行文,剖析细节,伴随读者一起成长,砥砺前行。

本文为前端异步编程解决方案实践系列第二篇,主要分析 Promise 内部机制及实现原理。后续异步系列还会包括 Generator、 Async/Await相关,挖坑占位。由于微信文章不能有外链,相关引用地址或文档链接请点击阅读原文,见谅。

注:本文 Promise 遵守 Promises/A+ 规范,实现参照 then/promise。

Promise 是什么

既然要讲实现原理,不免要承前启后交代清楚 Promise 是什么。查阅文档,如下:

A promise represents the eventual result of an asynchronous operation.  -- Promises/A+

A Promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly asynchronous) computation.  -- ECMAScript

Promises/A+ 规范中表示为一个异步操作的最终结果, ECMAScript 规范定义为延时或异步计算最终结果的占位符。言简意赅,但稍微聱牙诘屈,如何表述更浅显易懂呢?

说个故事, Promise 是一个美好的承诺,承诺本身会做出正确延时或异步操作。承诺会解决 callback处理异步回调可能产生的调用过早,调用过晚、调用次数过多过少、吞掉可能出现的错误或异常问题等。另外承诺只接受首次 resolve(..)或 reject(..) 决议,承诺本身状态转变后不会再变,承诺所有通过 then(..)注册的回调总是依次异步调用,承诺所有异常总会被捕获抛出。她,是一个可信任的承诺。

严谨来讲, Promise 是一种封装和组合未来值得易于复用机制,实现关注点分离、异步流程控制、异常冒泡、串行/并行控制等。

注:文中提及 callback 问题详情见<<你不知道的JavaScript(中卷)>> 2.3 、3.3章节

标准解读

PromiseA+ 规范字数不多简明扼要,但仔细翻读,其中仍有有几点需要引人注意。

thenable 对象

thenable 是一个定义 then(..) 方法的对象或函数。 thenable 对象的存在目的是使 Promise 的实现更具有通用性,只要其暴露出一个遵循 Promise/A+ 规范的 then(..) 方法。同时也会使遵循 Promise/A+ 规范的实现可以与那些不太规范但可用的实现能良好共存。

识别 thenable 或行为类似 Promise 对象可以根据其是否具有 then(..) 方法来判断,这其实叫类型检查也可叫鸭式辩型( duck typing)。对于 thenable 值鸭式类型检测大致类似于:


  1. if ( p !== null &&

  2.     (

  3.       typeof p === 'object' ||

  4.       typeof p === 'function'

  5.     ) &&

  6.     typeof p.then === 'function'

  7. ) {

  8.    // thenable

  9. } else {

  10.    // 非 thenable

  11. }

then 回调异步执行

众所周知, Promise 实例化时传入的函数会立即执行, then(...) 中的回调需要异步延迟调用。至于为什么要延迟调用,后文会慢慢解读。这里有个重要知识点,回调函数异步调用时机。

onFulfilled or onRejected must not be called until the execution context stack contains only platform code  -- Promise/A+

简译为 onFulfilled 或 onRejected 只在执行环境堆栈仅包含平台代码时才可被调用。稍有疑惑,Promise/A+ 规范又对此句加以解释:“实践中要确保 onFulfilled 和 onRejected方法异步执行,且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。这个事件队列可以采用宏任务 macro-task机制或微任务 micro-task机制来实现。”

虽然 PromiseA+未明确指出是以 microtask 还是 macrotask 形式放入队列,但 ECMAScript 规范明确指出 Promise 必须以 Promise Job 形式加入 job queues(也就是 microtask)。Job Queue 是 ES6 中新提出的概念,建立在事件循环队列之上。 job queue存在也是为了满足一些低延迟的异步操作。

敲黑板划重点,注意这里 macrotask microtask 分别表示异步任务的两种分类。在挂起任务时,JS 引擎会将所有任务按照类别分到两个队列中,首先在 macrotask 的队列(也叫 task queue)中取出第一个任务,执行完毕后取出 microtask 队列中的所有任务顺序执行;之后再取 macrotask 任务,周而复始,直至两个队列的任务都取完。

对于 microtask执行时机,whatwg HTML规范中也有阐述,详情可点击查阅。更多相关文章可参考附录 eventloop。

再看一个示例,加深理解:


  1. setTimeout(function () {

  2.  console.log('setTimeout');

  3. }, 0);

  4.  

  5. Promise.resolve().then(function () {

  6.  console.log('promise1');

  7. }).then(function () {

  8.  console.log('promise2');

  9. });

打印的顺序?正确答案是: promise1,promise2,setTimeout。

在进一步实现 Promise 对象之前,简单模拟异步执行函数供后文 Promise回调使用(也可采用 asap库等)。


  1. var asyncFn = function () {

  2.  if (typeof process === 'object' && process !== null &&

  3.      typeof(process.nextTick) === 'function'

  4.  ) {

  5.    return process.nextTick;

  6.  } else if (typeof(setImmediate) === 'function') {

  7.    return setImmediate;

  8.  }

  9.  return setTimeout;

  10. }();

Promise 状态

Promise 必须为以下三种状态之一:等待态( Pending)、执行态( Fulfilled)和拒绝态( Rejected)。一旦 Promise被 resolve或 reject,不能再迁移至其他任何状态(即状态immutable)。

为保持代码清晰,暂无异常处理。同时为表述方便,约定如下:

  • fulfilled 使用 resolved 代替

  • onFulfilled 使用 onResolved 代替

Promise 构造函数

从构造函数开始,我们一步步实现符合 PromsieA+ 规范的 Promise。大概描述下, Promise构造函数需要做什么事情。

  1. 初始化 Promise 状态( pending)

  2. 初始化 then(..) 注册回调处理数组( then 方法可被同一个 promise 调用多次)

  3. 立即执行传入的 fn 函数,传入 Promise 内部 resolve、 reject 函数

  4. ...

 


  1. function Promise (fn) {

  2.  // 省略非 new 实例化方式处理

  3.  // 省略 fn 非函数异常处理

  4.  

  5.  // promise 状态变量

  6.  // 0 - pending

  7.  // 1 - resolved

  8.  // 2 - rejected

  9.  this._state = 0;

  10.  // promise 执行结果

  11.  this._value = null;

  12.  

  13.  // then(..) 注册回调处理数组

  14.  this._deferreds = [];

  15.  

  16.  // 立即执行 fn 函数

  17.  try {

  18.    fn(function (value) {

  19.      resolve(this, value);

  20.    }, function (reason) {

  21.      reject(this, reason);

  22.    })

  23.  } catch (err) {

  24.    // 处理执行 fn 异常

  25.    reject(this, err);

  26.  }

  27. }

_state 和 _value 变量很容易理解, _deferreds变量做什么?规范描述: then 方法可以被同一个 promise 调用多次。为满足多次调用 then 注册回调处理,内部选择使用 _deferreds 数组存储处理对象。具体处理对象结构,见 then 函数章节。

最后执行 fn 函数,并调用 promise 内部的私有方法 resolve 和 reject。 resolve 和 reject 内部细节随后介绍。

then 函数

PromiseA+提到规范专注于提供通用的 then 方法。 then 方法可以被同一个 promise 调用多次,每次返回新 promise 对象 。 then 方法接受两个参数 onResolved、 onRejected(可选)。在 promise 被 resolve或 reject 后,所有 onResolved 或 onRejected 函数须按照其注册顺序依次回调,且调用次数不超过一次。

根据上述, then 函数执行流程大致为:

  1. 实例化空 promise 对象用来返回(保持 then链式调用)

  2. 构造 then(..) 注册回调处理函数结构体

  3. 判断当前 promise 状态, pending 状态存储延迟处理对象 deferred ,非 pending状态执行 onResolved 或 onRejected 回调

  4. ...


  1. Promise.prototype.then = function (onResolved, onRejected) {

  2.  

  3.  var res = new Promise(function () {});

  4.  // 使用 onResolved,onRejected 实例化处理对象 Handler

  5.  var deferred = new Handler(onResolved, onRejected, res);

  6.  

  7.  // 当前状态为 pendding,存储延迟处理对象

  8.  if (this._state === 0) {

  9.    this._deferreds.push(deferred);

  10.    return;

  11.  }

  12.  

  13.  // 当前 promise 状态不为 pending

  14.  // 调用 handleResolved 执行onResolved或onRejected回调

  15.  handleResolved(this, deferred);

  16.  

  17.  // 返回新 promise 对象,维持链式调用

  18.  return res;

  19. };

Handler 函数封装存储 onResolved、 onRejected 函数和新生成 promise 对象。


  1. function Handler (onResolved, onRejected, promise) {

  2.  this.onResolved = typeof onResolved === 'function' ? onResolved : null;

  3.  this.onRejected = typeof onRejected === 'function' ? onRejected : null;

  4.  this.promise = promise;

  5. }

链式调用为什么要返回新的 promise

如我们理解,为保证 then 函数链式调用, then 需要返回 promise 实例。但为什么返回新的 promise,而不直接返回 this 当前对象呢?看下面示例代码:


  1. var promise2 = promise1.then(function (value) {

  2.  return Promise.reject(3)

  3. })

假如 then 函数执行返回 this 调用对象本身,那么 promise2===promise1, promise2状态也应该等于 promise1 同为 resolved。而 onResolved 回调中返回状态为 rejected对象。考虑到 Promise 状态一旦 resolved 或 rejected就不能再迁移,所以这里 promise2也没办法转为回调函数返回的 rejected 状态,产生矛盾。

handleResolved 函数功能为根据当前 promise 状态,异步执行 onResolved 或 onRejected 回调函数。因在 resolve 或 reject 函数内部同样需要相关功能,提取为单独模块。往下翻阅查看。

resolve 函数

Promise 实例化时立即执行传入的 fn 函数,同时传递内部 resolve 函数作为参数用来改变 promise 状态。 resolve 函数简易版逻辑大概为:判断并改变当前 promise 状态,存储 resolve(..) 的 value 值。判断当前是否存在 then(..) 注册回调执行函数,若存在则依次异步执行 onResolved 回调。

但如文初所 thenable 章节描述,为使 Promise 的实现更具有通用性,当 value 为存在 then(..) 方法的 thenable 对象,需要做 PromiseResolutionProcedure 处理,规范描述为 [[Resolve]](promise,x)。( x 即 为后面 value 参数)。

具体处理逻辑流程如下:

  • 如果 promise 和 x 指向同一对象,以 TypeError 为据因拒绝执行 promise

  • 如果 x 为 Promise ,则使 promise 接受 x 的状态

  • 如果 x 为对象或函数

    1. 把 x.then 赋值给 then

    2. 如果取 x.then 的值时抛出错误 e ,则以 e 为据因拒绝 promise

    3. 如果 then 是函数,将 x 作为函数的作用域 this 调用之。

    4. 如果 x 不为对象或者函数,以 x 为参数执行 promise

原文参考 PromiseA+规范 Promise Resolution Procedure 。


  1. function resolve (promise, value) {

  2.  // 非 pending 状态不可变

  3.  if (promise._state !== 0) return;

  4.  

  5.  // promise 和 value 指向同一对象

  6.  // 对应 Promise A+ 规范 2.3.1

  7.  if (value === promise) {

  8.    return reject( promise, new TypeError('A promise cannot be resolved with itself.') );

  9.  }

  10.  

  11.  // 如果 value 为 Promise,则使 promise 接受 value 的状态

  12.  // 对应 Promise A+ 规范 2.3.2

  13.  if (value && value instanceof Promise && value.then === promise.then) {

  14.    var deferreds = promise._deferreds

  15.  

  16.    if (value._state === 0) {

  17.      // value 为 pending 状态

  18.      // 将 promise._deferreds 传递 value._deferreds

  19.      // 偷个懒,使用 ES6 展开运算符

  20.      // 对应 Promise A+ 规范 2.3.2.1

  21.      value._deferreds.push(...deferreds)

  22.    } else if (deferreds.length !== 0) {

  23.      // value 为 非pending 状态

  24.      // 使用 value 作为当前 promise,执行 then 注册回调处理

  25.      // 对应 Promise A+ 规范 2.3.2.2、2.3.2.3

  26.      for (var i = 0; i < deferreds.length; i++) {

  27.        handleResolved(value, deferreds[i]);

  28.      }

  29.      // 清空 then 注册回调处理数组

  30.      value._deferreds = [];

  31.    }

  32.    return;

  33.  }

  34.  

  35.  // value 是对象或函数

  36.  // 对应 Promise A+ 规范 2.3.3

  37.  if (value && (typeof value === 'object' || typeof value === 'function')) {

  38.    try {

  39.      // 对应 Promise A+ 规范 2.3.3.1

  40.      var then = obj.then;

  41.    } catch (err) {

  42.      // 对应 Promise A+ 规范 2.3.3.2

  43.      return reject(promise, err);

  44.    }

  45.  

  46.    // 如果 then 是函数,将 value 作为函数的作用域 this 调用之

  47.    // 对应 Promise A+ 规范 2.3.3.3

  48.    if (typeof then === 'function') {

  49.      try {

  50.        // 执行 then 函数

  51.        then.call(value, function (value) {

  52.          resolve(promise, value);

  53.        }, function (reason) {

  54.          reject(promise, reason);

  55.        })

  56.      } catch (err) {

  57.        reject(promise, err);

  58.      }

  59.      return;

  60.    }

  61.  }

  62.  

  63.  // 改变 promise 内部状态为 `resolved`

  64.  // 对应 Promise A+ 规范 2.3.3.4、2.3.4

  65.  promise._state = 1;

  66.  promise._value = value;

  67.  

  68.  // promise 存在 then 注册回调函数

  69.  if (promise._deferreds.length !== 0) {

  70.    for (var i = 0; i < promise._deferreds.length; i++) {

  71.      handleResolved(promise, promise._deferreds[i]);

  72.    }

  73.    // 清空 then 注册回调处理数组

  74.    promise._deferreds = [];

  75.  }

  76. }

resolve 函数逻辑较为复杂,主要集中在处理 value ( x)值多种可能性。如果 value 为 Promise 且状态为 pending时,须使 promise 接受 value 的状态。在 value 状态为 pending 时,简单将 promise 的 deferreds 回调处理数组赋予 value deferreds变量。非 pending 状态,使用 value 内部值回调 promise注册的 deferreds。

如果 value 为 thenable 对象,以 value 作为函数的作用域 this 调用之,同时回调调用内部 resolve(..)、 reject(..)函数。

其他情形则以 value 为参数执行 promise,调用 onResolved 或 onRejected 处理函数。

事实上, PromiseA+规范 定义的 PromiseResolutionProcedure 处理流程是用来处理 then(..) 注册的 onResolved 或 onRejected 调用返回值 与 then 新生成 promise 之间关系。不过考虑到 fn 函数内部调用resolve(..)产生值 与当前 promise 值仍然存在相同关系,逻辑一致,写进相同模块。

reject 函数

Promise 内部私有方法 reject 相较于 resolve 逻辑简单很多。如下所示:


  1. function reject (promise, reason) {

  2.  // 非 pending 状态不可变

  3.  if (promise._state !== 0) return;

  4.  

  5.  // 改变 promise 内部状态为 `rejected`

  6.  promise._state = 2;

  7.  promise._value = reason;

  8.  

  9.  // 判断是否存在 then(..) 注册回调处理

  10.  if (promise._deferreds.length !== 0) {

  11.    // 异步执行回调函数

  12.    for (var i = 0; i < promise._deferreds.length; i++) {

  13.      handleResolved(promise, promise._deferreds[i]);

  14.    }

  15.    promise._deferreds = [];

  16.  }

  17. }

handleResolved 函数

了解完 Promise 构造函数、 then 函数、以及内部 resolve 和 reject 函数实现,你会发现其中所有的回调执行我们都统一调用 handleResolved函数,那 handleResolved 到底做了哪些事情,实现又有什么注意点?

handleResolved 函数具体会根据 promise 当前状态判断调用 onResolved、 onRejected,处理 then(..)注册回调为空情形,以及维护链式 then(..) 函数后续调用。具体实现如下:


  1. function handleResolved (promise, deferred) {

  2.  // 异步执行注册回调

  3.  asyncFn(function () {

  4.    var cb = promise._state === 1 ?

  5.            deferred.onResolved : deferred.onRejected;

  6.  

  7.    // 传递注册回调函数为空情况

  8.    if (cb === null) {

  9.      if (promise._state === 1) {

  10.        resolve(deferred.promise, promise._value);

  11.      } else {

  12.        reject(deferred.promise, promise._value);

  13.      }

  14.      return;

  15.    }

  16.  

  17.    // 执行注册回调操作

  18.    try {

  19.      var res = cb(promise._value);

  20.    } catch (err) {

  21.      reject(deferred.promise, err);

  22.    }

  23.  

  24.    // 处理链式 then(..) 注册处理函数调用

  25.    resolve(deferred.promise, res);

  26.  });

  27. }

具体处理注册回调函数 cb 为空情形,如下面示例。判断当前回调 cb 为空时,使用 deferred.promise 作为当前 promise 结合 value 调用后续处理函数继续往后执行,实现值穿透空处理函数往后传递。


  1. Promise.resolve(233)

  2.  .then()

  3.  .then(function (value) {

  4.    console.log(value)

  5.  })

关于 then 链式调用,简单再说下。实现 then 函数的链式调用,只需要在 Promise.prototype.then(..) 处理函数中返回新的 promise 实例即可。但除此之外,还需要依次调用 then 注册的回调处理函数。如 handleResolved 函数最后一句 resolve(deferred.promise,res) 所示。

then 注册回调函数为什么异步执行

这里回答开篇所提到的一个问题, then 注册的 onResolved、 onRejected 函数为什么要采用异步执行?再来看一段实例代码。


  1. var a = 1;

  2.  

  3. promise1.then(function (value) {

  4.  a = 2;

  5. })

  6.  

  7. console.log(a)

promise1 内部执行同步或异步操作未知。假如未规定 then 注册回调为异步执行,则这里打印 a 可能存在两种值。promise1 内部同步操时 a === 2,相反执行异步操作时 a === 1。为屏蔽依赖外部的不确定性,规范指定 onFulfilled 和 onRejected 方法异步执行。

promise 内部错误或异常

如果 promise 被 rejected,则会调用拒绝回调并传入拒由。比如在 Promise 的创建过程中( fn执行时)出现异常,那这个异常会被捕捉并调用 onRejected。

但还存在一处细节,如果 Promise 完成后调用 onResolved 查看结果时出现异常错误会怎么样呢?注意此时 onRejected 不会被触发执行,因为 onResolved 内部异常并不会改变当前 promise 状态(仍为 resolved),而是改变 then 中返回新的 promise 状态为 rejected。异常未丢失但也未调用错误处理函数。

如何处理? ECMAScript规范有定义 Promise.prototype.catch方法,假如你对 onResolved 处理过程没有信心或存在异常 case 情况,最好还是在 then 函数后调用 catch方法做异常捕获兜底处理。

Promise 相关的方法实现

查阅 Promise 相关文档或书籍,你还会发现 Promise 相关有用的API: Promise.race、 Promise.all、 Promise.resolve、 Promise.reject。这里对 Promise.race 方法实现做个展示,剩余可自行参考实现。


  1. Promise.race = function (values) {

  2.  return new Promise(function (resolve, reject) {

  3.    values.forEach(function(value) {

  4.      Promise.resolve(value).then(resolve, reject);

  5.    });

  6.  });

  7. };

Generator Function 是 ES6 提供的一种异步流程控制解决方案。在此之前异步编程形式有,回调函数、事件监听、发布/订阅、Promise 等。但仔细思考前面解决方案,实际还是以回调函数作为基础,并没有从语法结构来改变异步写法。

区别于普通函数,Generator Function 可以在执行时暂停,后面又能从暂停处继续执行。通常在异步操作时交出函数执行权,完成后在同位置处恢复执行。新语法更容易在异步场景下达到以同步形式处理异步任务。

之前有写过关于 Promise 解决方式和内部原理实现。接续上文,此篇文章主要阐述 迭代器相关、Generator Function 语法、yield操作符、异步场景使用、常用自动执行器、Babel转译等。

注意后文将 Generator Function 翻译为生成器函数,个别处简述生成器。

迭代器

在了解生成器函数前,有必要先认识下迭代器。迭代器是一种特殊对象,具有专门为迭代流程设计的 next() 方法。每次调用 next() 都会返回一个包含 value 和 done 属性的对象。ECMAScript 文档 The IteratorResult Interface 解释为:

 

  • done (布尔类型)

    • 如果迭代器遍历到迭代序列末端时 done 为 true

    • 如果迭代器仍可继续在序列中遍历时 done 为 false

  • value (任何类型)

    • 如果 done 为 false,值为当前迭代元素 value

    • 如果 done 为 true,且迭代器存在 return value 则为相应值

    • 如果没有返回值 则为 undefined

简单用 ECMAScript 5 语法创建一个符合迭代器接口示例:


  1. function createIterator (items) {

  2.  var i = 0

  3.  

  4.  return {

  5.    next: function () {

  6.      var done = (i >= items.length)

  7.      var value = !done ? items[i++] : undefined

  8.  

  9.      return {

  10.        done: done,

  11.        value: value

  12.      }

  13.    }

  14.  }

  15. }

  16.  

  17. var iterator = createIterator([1, 2])

  18.  

  19. console.log(iterator.next())    // {done: false, value: 1}

  20. console.log(iterator.next())    // {done: false, value: 2}

  21. console.log(iterator.next())    // {done: true, value: undefined}

通常标准的 for 循环代码,使用变量 i 或 j 等来标示内部索引,每次迭代自增自减维系正确索引值。对比迭代器,循环语句语法简单,但是如果要处理多个循环嵌套则需要设置跟踪多个索引变量,代码复杂度会大大增加。迭代器的出现一定程度能消除这种复杂性,减少循环中的错误。

除此之外,迭代器提供一致的符合迭代器协议接口,可以统一可迭代对象遍历方式。例如 for...of 语句可以来迭代包含迭代器的可迭代对象(如 Array、Map、Set、String 等)。

生成器

生成器是一种返回迭代器的函数,通过 function 关键字后跟星号 (*) 来表示,此外函数中还需要包含新关键字 yield。将上面示例改写为生成器函数方式。


  1. function *createIterator (items) {

  2.  for (let i = 0; i < items.length; i++) {

  3.    yield items[i]

  4.  }

  5. }

  6.  

  7. const iterator = createIterator([1, 2])

  8.  

  9. console.log(iterator.next())    // {done: false, value: 1}

  10. console.log(iterator.next())    // {done: false, value: 2}

  11. console.log(iterator.next())    // {done: true, value: undefined}

上述代码中,通过星号 (*) 表明 createIterator 是一个生成器函数,yield 关键字用来指定调用迭代器的 next() 方法时的返回值及返回顺序。

调用生成器函数并不会立即执行内部语句,而是返回这个生成器的迭代器对象。迭代器首次调用 next() 方法时,其内部会执行到 yield 后的语句为止。再次调用 next() ,会从当前 yield 之后的语句继续执行,直到下一个 yield 位置暂停。

next() 返回一个包含 value 和 done 属性的对象。value 属性表示本次 yield 表达式返回值,done 表示后续是否还有 yield 语句,即生成器函数是否已经执行完毕。

生成器相关方法如下:

  • Generator.prototype.next(),返回一个由 yield表达式生成的值

  • Generator.prototype.return(),返回给定的值并结束生成器

  • Generator.prototype.throw(),向生成器抛出一个错误

生成器函数继承于 Function 和 Object,不同于普通函数,生成器函数不能作为构造函数调用,仅是返回生成器对象。完整的生成器对象关系图所示:

 

yield 关键字

yield 关键字可以用来暂停和恢复一个生成器函数。yield 后面的表达式的值返回给生成器的调用者,可以认为 yield 是基于生成器版本的 return 关键字。yield 关键字后面可以跟 任何值 或 表达式。

一旦遇到 yield 表达式,生成器的代码将被暂停运行,直到生成器的 next() 方法被调用。每次调用生成器的next()方法时,生成器都会在 yield 之后紧接着的语句继续执行。直到遇到下一个 yield 或 生成器内部抛出异常 或 到达生成器函数结尾 或 到达 return 语句停止。

注意,yield 关键字只可在生成器内部使用,在其他地方使用会导致语法错误。即使在生成器内部函数中使用也是如此。


  1. function *createIterator (items) {

  2.  items.forEach(item => {

  3.    // 语法错误

  4.    yield item + 1

  5.  })

  6. }

另外, yield* 可以用于声明委托生成器,即在 Generator 函数内部调用另一个 Generator 函数。

next 方法

Generator.prototype.next() 返回一个包含属性 done 和 value 的对象,也可以接受一个参数用以向生成器传值。返回值对象包含的 done 和 value 含义与迭代器章节一致,没有可过多说道的。值得关注的是,next() 方法可以接受一个参数,这个参数会替代生成器内部上条 yield 语句的返回值。如果不传 yield 语句返回值则为 undefined。例如:


  1. function *createIterator (items) {

  2.  let first = yield 1

  3.  let second = yield first + 2

  4.  yield second + 3

  5. }

  6.  

  7. let iterator = createIterator()

  8.  

  9. console.log(iterator.next())    // {value: 1, done: false}

  10. console.log(iterator.next(4))   // {value: 6, done: false}

  11. console.log(iterator.next())    // {value: NaN, done: false}

  12. console.log(iterator.next())    // {value: undefined, done: true}

有个特例,首次调用 next() 方法时无论传入什么参数都会被丢弃。因为传给 next() 方法的参数会替代上一次 yield 的返回值,而在第一次调用 next() 方法前不会执行任何 yield 语句,所以首次调用时传参是无意义的。

事实上能给迭代器内部传值的能力是很重要的。比如在异步流程中,生成器函数执行到 yield 关键字处挂起,异步操作完成后须传递当前异步值供迭代器后续流程使用。

异步流程控制

Generator 函数可以暂停和恢复执行,next() 可以做函数内外数据交换,这使得生成器函数可作为异步编程的完整解决方案。以一个异步场景为例:


  1. function *gen () {

  2.  const url = 'https://api.github.com/user/github'

  3.  const result = yield fetch(url)

  4.  console.log(result.bio)

  5. }

上述代码中,Generator 函数封装了一个异步请求操作。除了增加 yield 关键字外,上面代码非常像同步操作。不过运行上述代码还需要一段执行器代码。


  1. const g = gen()

  2. const result = g.next()

  3.  

  4. result.value.then(function (data) => {

  5.  g.next(data.json())

  6. })

执行器相关代码先执行 Generator 函数获取遍历器对象,然后使用 next() 执行异步任务的第一阶段,在 fetch 返回的 promise.then 方法中调用 next 方法执行第二阶段操作。可以看出,虽然 Generator 函数把异步操作表示得很简洁,但是流程管理却不方便,需要额外手动添加运行时代码。

通常为了省略额外的手动流程管理,会引入自动执行函数辅助运行。假如生成器函数中 yield 关键字后全部为同步操作,很容易递归判断返回值 done 是否为 true 运行至函数结束。但更复杂的是异步操作,需要异步完成后执行迭代器 next(data) 方法,传递异步结果并恢复接下来的执行。但以何种方式在异步完成时执行 next(),需要提前约定异步操作形式。

常用的自动流程管理有 Thunk 函数模式 和 co 模块。co 同样可以支持 Thunk 函数 和 Promise 异步操作。在接下来解释自动流程管理模块前,先简单说道 Thunk 函数。

在 JavaScript 语言中,Thunk 函数指的是将多参数函数替换为一个只接受回调函数作为参数的单参数函数(注:这里多参数函数指的是类似 node 中异步 api 风格,callback 为最后入参)。类似于函数柯里化的转换过程,把接受多个参数变换成只接受一个单参数函数。以 node 中异步读取文件为例:


  1. // 正常版本的 readFile(多参数)

  2. fs.readFile(fileName, callback)

  3.  

  4. // Thunk 版本的 readFile (单参数)

  5. const Tunk = function (fileName) {

  6.  return function (callback) {

  7.    return fs.readFile(fileName, callback)

  8.  }

  9. }

  10.  

  11. const readFileThunk = readFileThunk(fileName)

  12. readFileThunk(callback)

其实任何函数参数中包含回调函数,都能写成 Thunk 函数形式。类似函数柯里化过程,简单的 Thunk 函数转换器如下所示。生成环境建议使用 Thunkify 模块,可以处理更多异常边界情况。


  1. // Thunk 转换器

  2. const Thunk = function (fn) {

  3.  return function (...args) {

  4. <span style="font-family:ar

营业执照 版权所有©Copyright 2008-2017,北京中软国际教育科技股份有限公司, All Rights Reserved. ICP备案号:京ICP备14058756号-2

sitemap | 来校路线 | 分类导航 | 关于我们