徹底理解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
***************************************************/

如需實時查看更多更新文章，請關注公衆號"一點碼客"，一起探索技術