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