ES8 async/await語法

 Async/await的主要益處是可以避免回調地獄（callback hell）問題

Chromium JavaScript引擎 從v5.5開始支持async/await功能,Chromium JavaScript引擎版本號的查看方法是:在瀏覽器地址欄輸入 chrome://version，查詢出來的信息如下圖所示:

 

這意味着async/await不再是實驗性功能，使用它時無需指定--harmony參數，此參數用來開啟那些幾乎已完成但被V8團隊認為還不穩定的功能。不同的node版本使用不同的V8引擎，查看方式是:

Node.js 7.6正式默認支持async/await功能

 

 async-await語法介紹

在函數，匿名函數，箭頭函數，變量，類中加上關鍵字async就行了

async function asyncFunc() {}

const asyncFunc = async function() {}

async function() {}

async () => {}

class someClass {
    async asyncFunc() {}
}

function前面加上async關鍵字，表示該function需要執行異步代碼。 async function函數體內可以使用await關鍵字，且await關鍵字只能出現在async function函數體內。

await關鍵字可以跟在任意變量或者表達式之前，await后面通常會跟一個異步過程，如下

async function asyncFunc() {
    await somePromise;
}

async function的返回值

async function固定會返回一個promise，即便函數體里面沒有調用return。由於async function返回一個promise，所以可以寫在await后面，類似這樣

async function asyncFun1() {}
async function asyncFun2() {
    await asyncFun1();
}
async function asyncFun3() {
    await asyncFun2();
}
asyncFun3();

等效於:
async function asyncFun1() {}
async function asyncFun2() {}
async function asyncFun3() {
    await asyncFun1();
    await asyncFun2();
}
asyncFun3();

如果有return，return后面的值都會被包裝成一個promise執行正確的回調函數,所以return 'foo'會被包裝成return Promise.resolve('foo')。

React中使用jQuery $.ajax Promise避免回調地獄的語法

componentDidMount() {
    const self = this;
    // 獲取用戶名
    $.ajax('get_my_name')
    .then(name => {
        // 根據用戶名獲取個人信息
        // 鏈式Promise
        return $.ajax(`get_my_info_by_name'?name=${name}`);
    }).then(function(info) {
        self.setSate({info});
    }).catch(function(err) => {
        console.error(err);
    });
}

 

React中使用async,await的避免回調地獄的語法

async componentDidMount() {
    try {
        // 獲取用戶名
        const name = await $.ajax('get_my_name');
        // 根據用戶名獲取個人信息
        const info = await $.ajax(`get_my_info_by_name'?name=${name}`);
        this.setSate({info});
    } catch(err) {
        console.error(err);
    }
}

可以看出，async，await的寫法更優雅

參考文章

[1] 7.6默認支持Async/Await

[2] Hey async,await me    

[3] 如何在瀏覽器使用 async/await