處理異步的利器 async-await

異步神器 async-await

async-await和Promise的關係

es5的回調地獄層層嵌套，es6的Promise鏈式調用，使咱們稍喘口氣，但發現層級很深時，一步步的then也很噁心，終於es7出現了async-await，給咱們帶來光明。

async-await只是爲了讓咱們書寫代碼時更加流暢，固然也加強了代碼的可讀性，簡單來講：async-await是創建在promise機制之上的，並不能取代其地位。

基本語法

下述代碼就是async-await的基本形式，聲明瞭關鍵字async、await，同時函數執行結果彷佛返回了一個promise對象。沒錯！async聲明的函數會返回一個promise對象。

async function basicDemo() {
  let result = await Math.random();
    
  console.log(result);	
}

console.log(basicDemo());
// Promise {<pending>}
// VM6753:17 0.25258173282299134
複製代碼

async

async用來表示函數是異步的，定義的函數會返回一個promise對象，可使用then方法添加回調函數。

async function testAsync() {
    return 111;
}

testAsync().then(val => {
    console.log(val); // 111
});

// 若async定義的函數有返回值，至關於Promise.resolve(111)。
// 沒有return則至關於執行了Promise.resolve();
複製代碼

await

await 必須出如今 async 函數內部，不能單獨使用。

function error() {
  await Math.random();
}

notAsyncFunc(); 
// Uncaught SyntaxError: Unexpected identifier
// 會報錯，必須在async內部使用
複製代碼

雖然說await後面能夠等任何的JS表達式，可是它最主要的意圖是用來等待 Promise 對象的狀態被 resolved。

若是await的是 promise對象會形成異步函數中止執行而且等待promise 的解決。

若是等的是正常的表達式則當即執行。

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('enough sleep~');
        }, second);
    })
}
function normalFunc() {
    console.log('normalFunc');
}
async function awaitDemo() {
    await normalFunc(); // 等待普通表達式
    console.log('something, ~~');
    let result = await sleep(2000); // 等待的是promise對象
    console.log(result);// 兩秒以後會被打印出來
}

awaitDemo();
// normalFunc
// something, ~~
// enough sleep~ 這句會在兩秒後打印
複製代碼

項目案例

若是有三個ajax請求須要發生，第三個依賴第二個的結果，第二個依賴第一個的結果。

es5的callback回調會有三層，Promise會有三個then()，而async-await寫起來就好理解且清晰些。

// 仍然使用 setTimeout 來模擬異步請求
function sleep(second, param) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(param);
        }, second);
    })
}

async function test() {
    let result1 = await sleep(2000, 'req1');
    let result2 = await sleep(1000, 'req2' + result1);
    let result3 = await sleep(500, 'req3' + result2);
    console.log(`
        ${result3}
        ${result2}
        ${result1}
    `); 
}

test();
// 會在3.5s後輸出
// req3req2req1
// req2req1
// req1
複製代碼

reject錯誤處理

經過try catch 去處理 Promise.reject 返回來的數據。

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('throw error~');
        }, second);
    })
}

// 視狀況而定，若是須要處理reject，就在代碼塊外面包一層try catch
async function errorDemo() {
    try {
        let result = await sleep(1000);
    } catch (err) {
        console.log(err); // throw error
    }
}

errorDemo();
複製代碼

處理並行請求

若是有三個異步請求須要發送，相互沒有關聯，只是須要當請求都結束後將界面的 loading 清除掉便可。

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('request have done! ' + Math.random());
        }, second);
    })
}

async function correctDemo() {
    let p1 = sleep(2000);
    let p2 = sleep(2000);
    let p3 = sleep(2000);
  
    await Promise.all([p1, p2, p3]);
    console.log('clear the loading~');
}

correctDemo(); // clear the loading~
// 因此說async-await基於Promise機制
複製代碼

await必須在async函數的上下文中的

await in for 循環

// 正常 for 循環
async function forDemo() {
    let arr = [1, 2, 3, 4, 5];
    for (let i = 0; i < arr.length; i ++) {
        await arr[i];
    }
}
forDemo(); // 正常輸出

// 數組方法把for循環寫成下面這樣
async function forBugDemo() {
    let arr = [1, 2, 3, 4, 5];
    arr.forEach(item => {
        await item;
    });
}
forBugDemo(); // Uncaught SyntaxError: Unexpected identifier
複製代碼

參考連接，阮一峯老師的文章：www.ruanyifeng.com/blog/2015/0…

剛剛來到掘金，歡迎提出寶貴的建議，一塊兒學習進步。