javascript中的async怎麼用

隨著 Web 應用程式越來越複雜，非同步程式設計變得越來越重要。在 JavaScript 中，我們可以使用 async/await 關鍵字來管理非同步操作。本文將介紹 async 的基本用法，並提供一些實例來幫助你更好地理解。

什麼是 async？

async 函數是 ES6 引入的一種新的非同步程式設計方式。 async 關鍵字可以讓 JavaScript 函數變成非同步函數，使得函數傳回一個 Promise 對象，並且在處理非同步操作時更加簡潔明了。 async 函數通常與 await 關鍵字一起使用，await 關鍵字可以暫停 async 函數的執行，直到 Promise 完成。

async 函數的語法如下：

async function functionName() {
    //异步操作
}

使用 async

在使用 async 函數時，通常需要結合使用 Promise 物件。例如，如果我們想要取得一段遠端數據，我們可以使用fetch 函數：

async function fetchData() {
    const response = await fetch('http://example.com/data');
    const data = await response.json();
    return data;
}

在上面的程式碼中，我們建立一個名為fetchData 的async 函數，並在其中使用了fetch 函數發起一個遠端請求。由於 fetch 函數是非同步操作，所以我們需要使用 await 關鍵字等待 Promise 物件的完成。我們可以在 await 傳回的 Promise 完成後，使用解構賦值將取得的資料儲存在變數 data 中並傳回它。

處理多個 Promise

當我們需要處理多個 Promise 物件時，我們可以使用 Promise.all() 方法。 Promise.all() 方法可以將 Promise 物件組合成一個 Promise 對象，並在所有 Promise 物件都成功時傳回一個數組，其中包含每個 Promise 物件的結果。如果其中任何一個 Promise 物件失敗，該方法將立即傳回一個失敗的 Promise 對象，不再等​​待未完成的 Promise 物件。

例如，如果我們想要同時獲取兩個遠端資料來源的數據，並在它們都獲得之後進行操作，我們可以像下面這樣操作：

async function fetchData() {
    const [data1, data2] = await Promise.all([(async () => {
        const response = await fetch('http://example.com/data1');
        return response.json();
    })(), (async () => {
        const response = await fetch('http://example.com/data2');
        return response.json();
    })()]);
    console.log(data1, data2);
}

在上面的程式碼中，我們建立了一個名為fetchData 的async 函數，並在其中使用了Promise.all() 方法等待兩個遠端資料來源的資料。我們使用了自執行函數和 async/await 關鍵字來取回兩個資料來源，並將它們組成一個 Promise 物件陣列。當兩個資料來源的資料已全部解析後，我們將它們儲存在變數 data1 和 data2 中，並在控制台上進行了簡單的日誌記錄。

處理錯誤

在 async 函數中處理錯誤時，我們通常會使用 try/catch 語句。由於 async 函數傳回的是一個 Promise 對象，因此當我們拋出異常時，傳回的 Promise 物件將被拒絕（reject）。我們可以在 catch 區塊中捕捉這個異常並進行處理。

例如，我們可能會遇到一個網路請求失敗的異常，如下所示：

async function fetchData() {
    try {
        const response = await fetch('http://example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

在上面的程式碼中，我們建立了一個名為fetchData 的async 函數，使用了try/catch 語句以處理網路請求失敗的例外狀況。如果該請求成功，我們將資料儲存在變數 data 中，並傳回它。否則，我們將錯誤輸出到控制台。

結論

async/await 關鍵字是 JavaScript 管理非同步程式設計的一種方便的方式。使用 async/await 帶來了更簡潔、更容易閱讀和理解的程式碼。當您需要管理多個非同步操作或處理錯誤時，您也可以使用 Promise 和 try/catch 語句來實現這一點。希望本文對你有幫助！

以上是javascript中的async怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！