Babel将Async/Await函数转换为ES5兼容的代码

打开babel在线编译器

1. 进入bebel官网babeljs.io/
2. 点击右上角Try it out

添加async转换插件

1. 展开左下角的PLUGINS

2. 点击左下角Add Plugin 按钮

3. 搜索async

4. 选择@babel/plugin-transform-async-generator-functions插件

   @babel/plugin-transform-async-generator-functions 是一个 Babel 插件，用于将异步生成器函数转换为 ES5 兼容的代码。

function *

function * 这种声明方式（function关键字后跟一个星号）会定义一个生成器函数（Generator functiob）， 它返回一个Generator对象

Generator对象

Generator对象由生成器函数返回， 并且它符合可迭代协议和迭代器协议

Generator是隐藏类iterator的子类

方法

Generator.prototype.next()

Generator实例的next()方法返回一个包含属性done和value的对象。

next()方法可以接收一个参数

Generator.prototype.return()

Generator.prototype.throw()

yield 关键字

yield关键字用于暂停和恢复生成器函数

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();

• 转换后

function asyncToGenerator(gen, resolve, reject, _next, _throw, key, arg) {
   try {
    var info = gen[key](arg)
    var value = info.value
   } catch (error) {
    reject(error)
    return
   }

   if (info.done) {
    resolve(value)
   } else {
    Promise.resolve(value).then(_next, _throw)
   }
}

function _asyncToGenerator(fn) {
    return function () {
        var self = this,
        args = arguments
        return new Promise(function(resolve, reject) {
            // 执行传入的生成器函数
            var gen = fn.apply(self, args);
            function _next(value) {
                // 封装generator实例对象的next方法
               asyncToGenerator(gen, resolve, reject, _next, _throw, 'next', value)
                
            }
            function _throw(err) {
                // 封装generator实例对象的throw方法
                asyncToGenerator(gen, resolve, reject, _next, _throw, 'throw', err)
            }
            // 执行generator实例对象的next方法
            _next(undefined) 
        })
    }
}

const fetchData = data => new Promise(resolve => setTimeout(resolve, 1000, data + 1))

const fetchValue = function() {
    var _ref = _asyncToGenerator(function * () {
        var value1 = yield fetchData(1);
        var value2 = yield fetchData(value1);
        var value3 = yield fetchData(value2)
        console.log(value3)
    })
    return function fetchValue() {
        return _ref.apply(this, arguments)
    }
}();

fetchValue()