ES8 async/await語法

孤舟蓑翁發表於2017-05-01
AI

 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 

 

 

 

相關文章