理解 async/await

kid143 發布于2019-08-20 18:08 / 2646人閱讀

摘要：而函數的命令后面則可以是或者原始類型的值，，，但這時等同于同步操作返回值是。拋出的錯誤而會被方法回調函數接收到。

ES7 提出的async 函數，終于讓 JavaScript 對于異步操作有了終極解決方案。No more callback hell。
async 函數是 Generator 函數的語法糖。使用關鍵字 async 來表示，在函數內部使用 await 來表示異步。
想較于 Generator，Async 函數的改進在于下面四點：

內置執行器。Generator 函數的執行必須依靠執行器，而 Aysnc 函數自帶執行器，調用方式跟普通函數的調用一樣

更好的語義。async 和 await 相較于 * 和 yield 更加語義化

更廣的適用性。co 模塊約定，yield 命令后面只能是 Thunk 函數或 Promise對象。而 async 函數的 await 命令后面則可以是 Promise 或者原始類型的值（Number，string，boolean，但這時等同于同步操作）

返回值是 Promise。async 函數返回值是 Promise 對象，比 Generator 函數返回的 Iterator 對象方便，可以直接使用 then() 方法進行調用

Async 與其他異步操作的對比

先定義一個 Fetch 方法用于獲取 github user 的信息：

function fetchUser() { 
    return new Promise((resolve, reject) => {
        fetch("https://api.github.com/users/superman66")
        .then((data) => {
            resolve(data.json());
        }, (error) => {
            reject(error);
        })
    });
}

Promise 方式

/**
 * Promise 方式
 */
function getUserByPromise() {
    fetchUser()
        .then((data) => {
            console.log(data);
        }, (error) => {
            console.log(error);
        })
}
getUserByPromise();

Promise 的方式雖然解決了 callback hell，但是這種方式充滿了 Promise的 then() 方法，如果處理流程復雜的話，整段代碼將充滿 then。語義化不明顯，代碼流程不能很好的表示執行流程。
Generator 方式

/**
 * Generator 方式
 */
function* fetchUserByGenerator() {
    const user = yield fetchUser();
    return user;
}

const g = fetchUserByGenerator();
const result = g.next().value;
result.then((v) => {
    console.log(v);
}, (error) => {
    console.log(error);
})

Generator 的方式解決了 Promise 的一些問題，流程更加直觀、語義化。但是 Generator 的問題在于，函數的執行需要依靠執行器，每次都需要通過 g.next() 的方式去執行。
async 方式

/**
 * async 方式
 */
 async function getUserByAsync(){
     let user = await fetchUser();
     return user;
 }
getUserByAsync()
.then(v => console.log(v));

async 函數完美的解決了上面兩種方式的問題。流程清晰，直觀、語義明顯。操作異步流程就如同操作同步流程。同時 async 函數自帶執行器，執行的時候無需手動加載。

語法

async 函數返回一個 Promise 對象

async 函數內部 return 返回的值。會成為 then 方法回調函數的參數。

async function  f() {
    return "hello world"
};
f().then( (v) => console.log(v)) // hello world

如果 async 函數內部拋出異常，則會導致返回的 Promise 對象狀態變為 reject 狀態。拋出的錯誤而會被 catch 方法回調函數接收到。

async function e(){
    throw new Error("error");
}
e().then(v => console.log(v))
.catch( e => console.log(e));

async 函數返回的 Promise 對象，必須等到內部所有的 await 命令的 Promise 對象執行完，才會發生狀態改變

也就是說，只有當 async 函數內部的異步操作都執行完，才會執行 then 方法的回調。

const delay = timeout => new Promise(resolve=> setTimeout(resolve, timeout));
async function f(){
    await delay(1000);
    await delay(2000);
    await delay(3000);
    return "done";
}

f().then(v => console.log(v)); // 等待6s后才輸出 "done"

正常情況下，await 命令后面跟著的是 Promise ，如果不是的話，也會被轉換成一個立即 resolve 的 Promise
如下面這個例子：

async function  f() {
    return await 1
};
f().then( (v) => console.log(v)) // 1

如果返回的是 reject 的狀態，則會被 catch 方法捕獲。

Async 函數的錯誤處理

async 函數的語法不難，難在錯誤處理上。
先來看下面的例子：

let a;
async function f() {
    await Promise.reject("error");
    a = await 1; // 這段 await 并沒有執行
}
f().then(v => console.log(a));

如上面所示，當 async 函數中只要一個 await 出現 reject 狀態，則后面的 await 都不會被執行。
解決辦法：可以添加 try/catch。

// 正確的寫法
let a;
async function correct() {
    try {
        await Promise.reject("error")
    } catch (error) {
        console.log(error);
    }
    a = await 1;
    return a;
}

correct().then(v => console.log(a)); // 1

如果有多個 await 則可以將其都放在 try/catch 中。

如何在項目中使用

依然是通過 babel 來使用。
只需要設置 presets 為 stage-3 即可。
安裝依賴：

npm install babel-preset-es2015 babel-preset-stage-3 babel-runtime babel-plugin-transform-runtime

修改.babelrc:

"presets": ["es2015", "stage-3"],
"plugins": ["transform-runtime"]

這樣就可以在項目中使用 async 函數了。

Further Reading

Understanding JavaScript’s async await

Async/Await - Best Practices in Asynchronous Programming

異步操作和 Async 函數

文章首發于我的博客：chenhuichao.com

GPU云服務器云服務器 async await 全面理解理解理解對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84122.html

8張圖幫你一步步看清 async/await 和 promise 的執行順序

摘要：第部分畫圖一步步看清宏任務微任務的執行過程我們以開篇的經典面試題為例，分析這個例子中的宏任務和微任務。注意這里只是把推入微任務隊列，并沒有執行。執行結束，才能繼續執行后面的代碼如圖此時當前宏任務都執行完了，要處理微任務隊列里的代碼。 8張圖讓你一步步看清 async/await 和 promise 的執行順序為什么寫這篇文章？測試一下自己有沒有必要看需要具備的前置基礎知識主...

weizx 2019-08-23 13:51 評論0 收藏0
理解 JavaScript 的 async/await

摘要：因為函數返回一個對象，所以可以用于等待一個函數的返回值這也可以說是在等函數，但要清楚，它等的實際是一個返回值。幫我們干了啥作個簡單的比較上面已經說明了會將其后的函數函數表達式或的返回值封裝成一個對象，而會等待這個完成，并將其的結果返回出來。隨著 Node 7 的發布，越來越多的人開始研究據說是異步編程終級解決方案的 async/await。我第一次看到這組關鍵字并不是在 JavaSc...

tracymac7 2019-08-20 12:24 評論0 收藏0
promise async await 理解筆記

摘要：在異步編程中，提供了對象的方式。例如等同于所以可以理解為生成一個實例。那么自然也可以去調用則是配合使用的。等于是等待一個返回值，等待的執行結果。但是函數不會造成阻塞，所以配合使用，則沒有影響到外部。在異步編程中，es6提供了promise對象的方式。簡單的用法 var promise = new Promise((resolve,reject)=>{ if(){ ...

NoraXie 2019-08-26 11:57 評論0 收藏0
[譯]帶你理解 Async/await

摘要：所以是在一秒后顯示的。這個行為不會耗費資源，因為引擎可以同時處理其他任務執行其他腳本，處理事件等。每個回調首先被放入微任務隊列然后在當前代碼執行完成后被執行。，函數是異步的，但是會立即運行。否則，就返回結果，并賦值。「async/await」是 promises 的另一種更便捷更流行的寫法，同時它也更易于理解和使用。 Async functions 讓我們以 async 這個關鍵字開...

xiaochao 2019-08-23 18:09 評論0 收藏0
令人費解的 async/await 執行順序

摘要：問題的關鍵在于其執行過程中的微任務數量，下文中我們需要用上述代碼中的方式對微任務的執行順序進行標記，以輔助我們理解這其中的執行過程。原文發布在掘金社區：https://juejin.im/post/5c3cc981f265da616a47e028 起源 2019年了，相信大家對 Promise 和 async/await 都不再陌生了。前幾日，我在社區讀到了一篇關于 async/...

WilsonLiu95 2019-08-23 14:50 評論0 收藏0