js async await 終極非同步解決方案

閱讀目錄

既然有了promise 為什麼還要有async await ？當然是promise 也不是完美的非同步解決方案，而 async await 的寫法看起來更加簡單且容易理解。

回到目錄

promise 物件用於表示乙個非同步操作的最終狀態（完成或失敗），以及其返回的值。

promise物件是由關鍵字new及其建構函式來建立的。建構函式會，把乙個叫做「處理器函式」（executor function）的函式作為它的引數。這個「處理器函式」接受兩個函式resolve和reject作為其引數。當非同步任務順利完成且返回結果值時，會呼叫resolve函式，而當非同步任務失敗且返回失敗原因（通常是乙個錯誤物件）時，會呼叫reject函式。

promise 狀態

pending：初始狀態，既不是成功，也不是失敗狀態

fulfilled：操作成功

rejected：操作失敗

1    var promise1 = new promise(function(resolve, reject) , 300);
5     });
6     promise1.then(function(value) );
10     console.log(promise1);
11     //  [object promise]

通過外部then() 方法來繫結成功、失敗的**函式，有沒有感覺這個跟之前的ajax 差不多，只不過是我們把**丟到了then() 中，這個then 並且支援鏈式操作，即如果存在多個巢狀那麼也就是不斷的then()。

回到目錄

先從字面意思來理解，async 是「非同步」的意思，而 await 是等待的意思。所以應該很好理解 async 用於申明乙個非同步的function（實際上是async function 物件），而 await 用於等待乙個非同步任務執行完成的的結果。

並且 await 只能出現在 async 函式中。

1 在api中，把結果return 出去
2 export async function getretailunitprice ()

1 vuex 中把結果commit：
2 // 發電：日前機組中標出力
3 async getrealtimeretailunitprice ()  = await getretailunitprice()
5 commit(types.plant_realtime_dayahead, )
6 }

1 在vue中**
2 try  catch (e)

回到目錄

async 告訴程式這是乙個非同步操作，await 是乙個操作符，即 await 後面是乙個表示式。

async 的返回值

1  // async
2     async function testasync() 
5     const data = testasync();
6     console.log(data);

如圖所示：

當呼叫乙個 async 函式時，會返回乙個 promise 物件。根據mdn的解釋

當這個 async 函式返回乙個值時，promise 的 resolve 方法會負責傳遞這個值；

當 async 函式丟擲異常時，promise 的 reject 方法也會傳遞這個異常值。async 函式中可能會有 await 表示式，await表示式會使 async 函式暫停執行，直到表示式中的 promise 解析完成後繼續執行 async中await 後面的**並返回解決結果。

注意， await 關鍵字僅僅在 async function中有效

既然返回的是promise 物件，所以在最外層不能用 await 獲取其返回值的情況下，那麼肯定可以用原來的方式：then() 鏈來處理這個 promise 物件如

1     // async
2     async function testasync() 
5     let data = testasync().then( (data) => );
9     console.log(data);

如果 async 函式沒有返回值，又怎麼樣呢？很容易想到，它會返回 promise.resolve(undefined)。

聯想一下 promise 的特點無等待，所以在沒有 await 的情況下執行 async 函式，它會立即執行，返回乙個 promise 物件，並且，絕不會阻塞後面的語句。

回到目錄

mdn 是這樣描述 await 的：

await 表示式會暫停當前 async function 的執行，等待 promise 處理完成。若 promise 正常處理(fulfilled)，其**的resolve函式引數作為 await 表示式的值，繼續執行async function。若 promise 處理異常(rejected)，await 表示式會把 promise 的異常原因丟擲。另外，如果 await 操作符後的表示式的值不是乙個 promise，則返回該值本身。

阮一峰老師的解釋我覺得更容易理解：

async 函式返回乙個 promise 物件，當函式執行的時候，一旦遇到 await 就會先返回，等到觸發的非同步操作完成，再接著執行函式體內後面的語句。

按照mdn解釋 await會暫停當前async 函式執行，並且await 後面是乙個表示式，即這個await 等待的是乙個表示式（這個表示式返回promise 物件或者乙個具體的值）：

1 async function testawait()

輸出「hello await」

返回promose 物件，成功狀態

1     function say()  歲`);
6             }, 1000);
7         });
8     }
9 10     async function demo() 
14     demo();

返回promise 物件，失敗狀態

1 function say()  歲`);
6             }, 1000);
7         });
8     }
9     async function demo()  catch (e) 
16     }
17     demo();

async/await 相比原來的promise的優勢在於處理 then 鏈，不必把**巢狀在then中，只要await 即可，如

1     function sing() , 1000);
6         });
7     }
8     async function demo()  catch (e) 
17     }
18     demo();

如果使用原來的promise 就是把**放在then()中。

回到目錄

async 告訴程式這是乙個非同步，awiat 會暫停執行async中的**，等待await 表示式後面的結果，跳過async 函式，繼續執行後面**

async 函式會返回乙個promise 物件，那麼當 async 函式返回乙個值時，promise 的 resolve 方法會負責傳遞這個值；當 async 函式丟擲異常時，promise 的 reject 方法也會傳遞這個異常值

await 操作符用於等待乙個promise 物件，並且返回 promise 物件的處理結果（成功把resolve 函式引數作為await 表示式的值），如果等待的不是 promise 物件，則用 promise.resolve(xx) 轉化

js async await 終極非同步解決方案

終極演算法 2 終極演算法

化繁為簡的終極指南化繁為簡的終極指南

異或異或相關

js async await 終極非同步解決方案

終極演算法 2 終極演算法

化繁為簡的終極指南化繁為簡的終極指南

異或 異或相關

相關推薦

異或異或相關