async/await 中的并行串行問題

有這么兩個(gè)函數(shù)

var a = function () {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('a')
    }, 3000)
  })
}
var b = function () {
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('b')
    }, 2000)
  })
}

如果這樣執(zhí)行

;(async()=>{
  console.time('test')
  var aa = await a()
  var bb = await b()
  console.log(`$(aa)-${bb}`)
  console.timeEnd('test')
})()

結(jié)果是

$(aa)-b
test: 5010.7548828125ms  // 串行

但是如果這樣執(zhí)行

;(async()=>{
  console.time('test')
  var promiseA = a()
  var promiseB = b()
  var aa = await promiseA
  var bb = await promiseB
  console.log(`$(aa)-${bb}`)
  console.timeEnd('test')
})()

結(jié)果則是

$(aa)-b
test: 3001.277099609375ms  // 并行

這是為什么呢？？

回答

編輯回答

巫婆

其實(shí)這類語法糖，不太懂原理。建議通過 babel 轉(zhuǎn)換成ES5后，再去讀代碼，這樣便于理解。
比如上面的代碼體，轉(zhuǎn)換后：

串行：

while (1) {
  switch (_context.prev = _context.next) {
    case 0:
      console.time('test');
      _context.next = 3;
      return a(); // 先執(zhí)行 a

    case 3:
      aa = _context.sent; // 等待a 結(jié)果，返回了。繼續(xù)下一步
      _context.next = 6;
      return b(); 

    case 6:
      bb = _context.sent;

      console.log('$(aa)-' + bb);
      console.timeEnd('test');

    case 9:
    case 'end':
      return _context.stop();
  }
}

并行：

_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
  var promiseA, promiseB, aa, bb;
  return regeneratorRuntime.wrap(function _callee$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          console.time('test');
          // 所以這里是先調(diào)用，后取結(jié)果 ，其實(shí)這里如果你a,b里面有ajax調(diào)用。這里機(jī)會(huì)是順序發(fā)送了。也就假似并行
          
          // await promiseA, await promiseB代碼塊獲取的結(jié)果的地方，還是串行的。
          promiseA = a(); // 執(zhí)行，a 
          promiseB = b(); // 執(zhí)行，b
          
          _context.next = 5; // 5 
          return promiseA;

        case 5:
          aa = _context.sent;
          _context.next = 8;
          return promiseB;

        case 8:
          bb = _context.sent;

          console.log('$(aa)-' + bb);
          console.timeEnd('test');

        case 11:
        case 'end':
          return _context.stop();
      }
    }
  }, _callee, undefined);
}))();

2017年4月25日 15:53

編輯回答

熟稔

因?yàn)槟銉蓚€(gè)同時(shí)調(diào)用了
本來的邏輯是: a調(diào)用等待a的三秒然后b執(zhí)行等待b 兩秒向下執(zhí)行
現(xiàn)在是: a,b同時(shí)調(diào)用等待a的三秒等待的同時(shí)b的兩秒已經(jīng)執(zhí)行完畢所以到b時(shí)直接往下執(zhí)行

var promiseA = a()
var promiseB = b()

這樣試一下

;(async () => {
    console.time('test')
    var promiseA = a()
    var aa = await promiseA
    var promiseB = b()
    var bb = await promiseB
    console.log(`$(aa)-${bb}`)
    console.timeEnd('test')
})()

2017年5月31日 11:23

編輯回答