浏览器端 async/await 还是有点代价的

对于下面这段 js

1
2
3
4
5
6
7
8
9
10
11
12
function async3() {
  createPromise()
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    })
    .finally(() => {
        console.log('finally');
    });
}

其对应 async/await 版本是

1
2
3
4
5
6
7
8
9
10
async function async2() {
    try {
      const ret = await createPromise();
      console.log(ret);
    } catch (e) {
      console.error(e);
    } finally {
      console.log('finally');
    }
}

经 babel 转为 ES5 后,除了必要的 babel-polypill,会生成以下代码,其中 _asyncToGenerator 不会多次生成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var async2 = function () {
  var _ref = _asyncToGenerator( /*#<strong>PURE</strong>*/regeneratorRuntime.mark(function _callee() {
    var ret;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            _context.next = 3;
            return createPromise();

<pre><code>      case 3:
        ret = _context.sent;

        console.log(ret);
        _context.next = 10;
        break;

      case 7:
        _context.prev = 7;
        _context.t0 = _context['catch'](0);

        console.error(_context.t0);

      case 10:
        _context.prev = 10;

        console.log('finally');
        return _context.finish(10);

      case 13:
      case 'end':
        return _context.stop();
    }
  }
}, _callee, this, [[0, 7, 10, 13]]);
</code></pre>

}));

return function async2() {
    return _ref.apply(this, arguments);
  };
}();

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<a href="arg">key</a>; 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"); }); }; }

写法上直观了的,但在浏览器端,还是有些代价,生成的代码会多出不少。