ES6 系列之 Babel 將 Async 編譯成了什么樣子

wangym 發(fā)布于2019-08-23 12:39 / 3200人閱讀

摘要：大約后輸出我們直接在官網(wǎng)的粘貼上述代碼，然后查看代碼編譯成什么樣子相關(guān)的代碼我們?cè)谙盗兄畬⒕幾g成了什么樣子中已經(jīng)介紹過(guò)了，這次我們重點(diǎn)來(lái)看看函數(shù)以上這段代碼主要是用來(lái)實(shí)現(xiàn)的自動(dòng)執(zhí)行以及返回。

前言

本文就是簡(jiǎn)單介紹下 Async 語(yǔ)法編譯后的代碼。

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 官網(wǎng)的 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

regeneratorRuntime 相關(guān)的代碼我們?cè)?《ES6 系列之 Babel 將 Generator 編譯成了什么樣子》中已經(jīng)介紹過(guò)了，這次我們重點(diǎn)來(lái)看看 _asyncToGenerator 函數(shù)：

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

以上這段代碼主要是用來(lái)實(shí)現(xiàn) generator 的自動(dòng)執(zhí)行以及返回 Promise。

當(dāng)我們執(zhí)行 fetchValue() 的時(shí)候，執(zhí)行的其實(shí)就是 _asyncToGenerator 返回的這個(gè)匿名函數(shù)，在匿名函數(shù)中，我們執(zhí)行了

var gen = fn.apply(this, arguments);

這一步就相當(dāng)于執(zhí)行 Generator 函數(shù)，舉個(gè)例子：

function* helloWorldGenerator() {
  yield "hello";
  yield "world";
  return "ending";
}

var hw = helloWorldGenerator();

var gen = fn.apply(this, arguments) 就相當(dāng)于 var hw = helloWorldGenerator();，返回的 gen 是一個(gè)具有 next()、throw()、return() 方法的對(duì)象。

然后我們返回了一個(gè) Promise 對(duì)象，在 Promise 中，我們執(zhí)行了 step("next")，step 函數(shù)中會(huì)執(zhí)行：

try {
  var info = gen[key](arg);
  var value = info.value;
} catch (error) {
  reject(error);
  return;
}

step("next") 就相當(dāng)于 var info = gen.next()，返回的 info 對(duì)象是一個(gè)具有 value 和 done 屬性的對(duì)象：

{value: Promise, done: false}

接下來(lái)又會(huì)執(zhí)行：

if (info.done) {
  resolve(value);
} else {
  return Promise.resolve(value).then(
    function(value) {
      step("next", value);
    },
    function(err) {
      step("throw", err);
    }
  );
}

value 此時(shí)是一個(gè) Promise，Promise.resolve(value) 依然會(huì)返回這個(gè) Promise，我們給這個(gè) Promise 添加了一個(gè) then 函數(shù)，用于在 Promise 有結(jié)果時(shí)執(zhí)行，有結(jié)果時(shí)又會(huì)執(zhí)行 step("next", value)，從而使得 Generator 繼續(xù)執(zhí)行，直到 info.done 為 true，才會(huì) 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();

請(qǐng)?jiān)徫宜艘黄恼隆?/p> ES6 系列

ES6 系列目錄地址：https://github.com/mqyqingfeng/Blog

ES6 系列預(yù)計(jì)寫(xiě)二十篇左右，旨在加深 ES6 部分知識(shí)點(diǎn)的理解，重點(diǎn)講解塊級(jí)作用域、標(biāo)簽?zāi)０?、箭頭函數(shù)、Symbol、Set、Map 以及 Promise 的模擬實(shí)現(xiàn)、模塊加載方案、異步處理等內(nèi)容。

如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤剑?qǐng)務(wù)必給予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎 star，對(duì)作者也是一種鼓勵(lì)。

GPU云服務(wù)器云服務(wù)器 es6-系列系列之系列之二架構(gòu)之坑系列

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98892.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wangym

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【黑五】Kimsufi：€14.99/月/E5-1620v2/32GB內(nèi)存/4TB硬盤(pán)/不限流量/1

閱讀 2380·2021-11-24 11:16
jmeter---壓力測(cè)試、并發(fā)測(cè)試、吞吐量測(cè)試

閱讀 2086·2021-09-30 09:47
C語(yǔ)言qsort（）函數(shù)的使用（詳解）

閱讀 2043·2021-09-10 10:51
使用GitHub（二）：配置并使用Git創(chuàng)建版本庫(kù)

閱讀 1345·2019-08-30 14:08
All In One

閱讀 3174·2019-08-30 13:47
響應(yīng)式設(shè)計(jì)中百分比 % 的問(wèn)題

閱讀 1555·2019-08-30 13:02
前端小白的全棧初體驗(yàn)

閱讀 3258·2019-08-29 12:29
UCloud Docker公共鏡像倉(cāng)庫(kù)

閱讀 3273·2019-08-26 17:05

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

ES6 系列之 Babel 將 Async 編譯成了什么樣子

相關(guān)文章

ES6 系列之 Babel 將 Generator 編譯成了什么樣子

【React進(jìn)階系列】從零開(kāi)始手把手教你實(shí)現(xiàn)一個(gè)Virtual DOM（二）

ES6 系列之 let 和 const

ES6系列之 let 和 const

es6基礎(chǔ)0x024：babel簡(jiǎn)單使用

發(fā)表評(píng)論

0條評(píng)論

wangym

男|高級(jí)講師

TA的文章

【黑五】Kimsufi：€14.99/月/E5-1620v2/32GB內(nèi)存/4TB硬盤(pán)/不限流量/1

jmeter---壓力測(cè)試、并發(fā)測(cè)試、吞吐量測(cè)試

C語(yǔ)言qsort（）函數(shù)的使用（詳解）

使用GitHub（二）：配置并使用Git創(chuàng)建版本庫(kù)

All In One

響應(yīng)式設(shè)計(jì)中百分比 % 的問(wèn)題

前端小白的全棧初體驗(yàn)

UCloud Docker公共鏡像倉(cāng)庫(kù)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

ES6 系列之 Babel 將 Async 編譯成了什么樣子

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！