async await基礎

這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰

1.引入async和await的緣由

①用promise解決異步函數仍然不夠簡潔

②promise的then鏈傳遞參數仍然很複雜

promise用來解決回調函數多層嵌套，async/await用來優化promise的多個then鏈調用和傳參問題。

2.async/await

從操做形式上看：Generator 函數的語法糖。async函數就是將 Generator 函數的星號（*）替換成async，將yield替換成await。

從功能上看：await命令就是內部then命令的語法糖。

2.1 async函數:

聲明某個函數是異步函數。

做用：async 函數返回的是一個 Promise 對象。

因此若是某個函數返回的自己就是promise的話，不須要使用async聲明。

若是async聲明的函數不是promise對象，async 會把這個直接量經過 Promise.resolve() 封裝成 Promise 對象。即便沒有返回值，async也會返回Promsie.resolve(undefined)。

2.2 await關鍵字：

await只能寫在async函數中

await是一個運算符， 與其後面表達式的值進行運算獲得最終結果，(咱們能夠定義一個變量接受這個結果，傳遞給下一個異步操做做爲參數)。

十分十分重要!!!!!! :

• await後面不是一個 Promise 對象: await會阻塞後面的代碼，先執行async外面的同步代碼，同步代碼執行完，再回到async內部，把這個非promise的東西，做爲 await表達式的結果。
• await後面是一個 Promise 對象: await 會阻塞後面的代碼，先執行async外面的同步代碼，等着 Promise 對象 resolve，而後獲得 resolve 的值，做爲 await 表達式的運算結果。

例:有三個步驟，但每個步驟都須要以前每一個步驟的結果。

function step1(n) { 
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}
function step2(m, n) {
    console.log(`step2 with ${m} and ${n}`);
    return takeLongTime(m + n);
}
function step3(k, m, n) {
    console.log(`step3 with ${k}, ${m} and ${n}`);
    return takeLongTime(k + m + n);
}
複製代碼

寫成 Promise 方式實現:

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
    .then(time2 => {
        return step2(time1, time2)
            .then(time3 => [time1, time2, time3]);
     })
    .then(times => {
        const [time1, time2, time3] = times;
        return step3(time1, time2, time3);
     })
    .then(result => { console.log(`result is ${result}`);
        console.timeEnd("doIt");
    });
}
doIt();
複製代碼

寫成async/await:

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time1, time2);
    const result = await step3(time1, time2, time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}
doIt();
複製代碼

2.3async函數的優勢（改進）:

• 更好的語義，將異步操做的代碼同步化
• 對比promise的then鏈傳遞參數更方便
• 返回值是promise對象，能夠用then方法指定下一步的操做。

參考：

一道面試題目的執行順序：

1.www.cnblogs.com/fundebug/p/…