異步終結者 async await ， 瞭解一下（面試難點）

前言

文章涉及的內容可能不全面，但量不少，須要慢慢看。我花了很長的時間整理，用心分享心得，但願對你們有所幫助。可是不免會有打字的錯誤或理解的錯誤點，但願發現的能夠郵箱告訴我1163675970@qq.com，我會及時的進行修改，只但願對你有所幫助，謝謝。

吐槽&吹噓

關於異步處理，ES5的回調使咱們陷入地獄，ES6的Promise使咱們脫離魔障，終於、ES7的async-await帶咱們走向光明。今天就來學習一下 async-await。 上車了

async-await 和 Promise的關係

混跡於各大技術社區的 鵝，常常看到這樣的字眼，有了async-await、promise 還有必要學習嗎、async await優於promise的幾個特色，看到這樣的信息後，鵝也蒙圈了。 如今才知道，async-await是promise和generator的語法糖。只是爲了讓咱們書寫代碼時更加流暢，固然也加強了代碼的可讀性。簡單來講：async-await 是創建在 promise機制之上的，並不能取代其地位。 懂否 ？？？

仍是從基礎走起

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

func();
<!--輸出-->
0.8177900460417995
Promise:{<resolved>: undefined}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: undefined
複製代碼

上面得栗子 就是 async-await的基本使用語法。有兩個陌生的關鍵字async、await，同時函數執行結果彷佛返回了一個promise對象。

async

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

async function func1() {
    return 123;
}

func1().then(val => {
    console.log(val); // 123
});
 <!-- 若 async 定義的函數有返回值，return 123; 至關於Promise.resolve(123),沒有聲明式的 return則至關於執行了Promise.resolve(); --> 複製代碼

await

await 能夠理解爲是 async wait 的簡寫。await 必須出如今 async 函數內部，不能單獨使用。 函數中只要使用await，則當前函數必須使用async修飾

function notAsyncFunc() {  
    await Math.random();
}
notAsyncFunc();
<!-- Uncaught SyntaxError: Unexpected identifier Uncaught SyntaxError: await僅在異步函數中有效 --> 複製代碼

await 後面能夠跟任何的JS 表達式。雖說 await 能夠等不少類型的東西，可是它最主要的意圖是用來等待 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);
    console.log(result);// 兩秒以後會被打印出來
}
awaitDemo();

<!-- 輸出 -->
VM899:9 normalFunc 
VM899:13 something, ~~

Promise：{<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: undefined

VM889:15  enough sleep~
複製代碼

但願藉此小栗子 ，幫助你們理解上述。

仍是來個真的實例吧

在真實開發中，你有三個請求須要發生，第三個請求是依賴於第二個請求的解構第二個請求依賴於第一個請求的結果。

若用 ES5實現會有3層的回調， 若用Promise 實現至少須要3個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, 'req01');
	console.log(` ${result1}`);
    let result2 = await sleep(1000, 'req02' + result1);
	console.log(` ${result2}`);
    let result3 = await sleep(500, 'req03' + result2);
    console.log(` ${result3}`);
   
}

test();

<!-- 輸出 
Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: undefined

VM913:14 
      req01
      req02req01
      req03req02req01


-->
複製代碼

reject 處理

上面的都是 resolved 的狀況，那麼 reject 的處理呢

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

async function errorDemo() {
    let result = await sleep(1000);
    console.log(result);
}
errorDemo();// VM706:11 Uncaught (in promise) want to sleep~

// 爲了處理Promise.reject 的狀況咱們應該將代碼塊用 try catch 包裹一下
async function errorDemoSuper() {
    try {
        let result = await sleep(1000);
        console.log(result);
    } catch (err) {
        console.log(err);
    }
}

errorDemoSuper();// want to sleep~
// 有了 try catch 以後咱們就可以拿到 Promise.reject 回來的數據了。
複製代碼

前方高能(並行處理)請注意！！！

對於初學者來講一不當心就將 ajax 的併發請求發成了阻塞式同步的操做了，我就真真切切的在工做中寫了這樣的代碼。await 若等待的是 promise 就會中止下來。真實業務是這樣的，我有三個異步請求須要發送，相互沒有關聯，只是須要當請求都結束後將界面的 loading 清除掉便可。 剛學完 async await 開心啊，處處亂用~

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

async function bugDemo() {
    await sleep(1000);
    await sleep(1000);
    await sleep(1000);
    console.log('clear the loading~');
}

bugDemo(); // 等待一會輸出 clear the loading~

複製代碼

loading 確實是等待請求都結束完才清除的。可是你認真的觀察下瀏覽器的 timeline 請求是一個結束後再發另外一個的（若觀察效果請發真實的 ajax 請求）

那麼，正常的處理是怎樣的呢？

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

Well, perfect. See, async await doesn't replace promise

await in for 循環

await必須在async函數的上下文中的,await僅在異步函數中有效。

// 正常 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
----------------------
async function forBugDemo() {
    let arr = [1, 2, 3, 4, 5];
    arr.forEach(async (item) => { 
        await item; 
    }); // 這樣就不會報錯了，可是await後面的異步不會等待執行，由於forEach底層是while循環
}
forBugDemo();


複製代碼

hahaha

ES7中新增的「語法糖」：async await

• 函數中只要使用await，則當前函數必須使用async修飾
• async是把修飾一個函數，控制其返回的結果是一個Promise實例
• await能夠理解爲把一個異步操做修飾爲同步的效果（可是它仍是異步）