彻底理解Async/Await 原理分析

 

　一．Async, Await机制总结

• async/await是写异步代码的新方式，以前的方法有回调函数和Promise。
• async/await是基于Promise实现的，它不能用于普通的回调函数。
• async/await与Promise一样，是非阻塞的。
• async/await使得异步代码看起来像同步代码，这正是它的魔力所在。

　二．Async, Await机制和promise对比

 

　１.　async/await转换工具安装

　　　　$ sudo npm install babel-plugin-async-to-promises -g
　　　　$ babel --plugins async-to-promises async_test.js

 

    ２.　async/await转换代码对比

function getConstant() {
    return 1
}

async function getAsyncConstant() {
    return 1
}

async function getPromise() {
    return new Promise((resolved, rejected)=> {
        resolved(1)
    });
}

async function test() {
    a = 2
    c = 1
    await getConstant();
    d = 3
    await getPromise();
    d = 4
    await getAsyncConstant();
    return 2
}

上面代码等价于下面的代码：

function getConstant() {
    return 1;
}

function getAsyncConstant() {
    return Promise.resolve().then(function () {
        return 1;
    });
}

function getPromise() {
    return Promise.resolve().then(function () {
        return new Promise((resolved, rejected) => {
            resolved(1);
        });
    });
}

function test() {
    return Promise.resolve().then(function () {
        a = 2;
        c = 1;
        return getConstant();
    }).then(function () {
        d = 3;
        return getPromise();
    }).then(function () {
        d = 4;
        return getAsyncConstant();
    }).then(function () {
        return 2;
    });
}

从上可知, 所有带async function 的都会主动生成Promise, await会主动生成then

/**************************************************
* 本文来自CSDN博主"一点码客"，喜欢请顶部点击关注
* 转载请标明出处:http://blog.csdn.net/itchosen
***************************************************/

如需实时查看更多更新文章，请关注公众号"一点码客"，一起探索技术