10個(gè)必備的js async/await 工具函數(shù)
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
當(dāng)談到異步編程時(shí)，async/await是JavaScript中常用的功能之一。下面是10個(gè)常用的await和async函數(shù)示例，以及對(duì)它們的代碼用途的解析： 1.異步獲取數(shù)據(jù) async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); return data; } 該函數(shù)使用await關(guān)鍵字等待異步請(qǐng)求返回的數(shù)據(jù)，并將其解析為JSON格式。這樣，我們可以在代碼中以同步的方式處理數(shù)據(jù)，而無需使用回調(diào)函數(shù)。 2.異步執(zhí)行多個(gè)任務(wù) async function performTasks() { const task1 = doTask1(); const task2 = doTask2(); await Promise.all([task1, task2]); console.log('Tasks completed'); } 在這個(gè)例子中，我們使用await等待多個(gè)任務(wù)同時(shí)完成。Promise.all接收一個(gè)包含多個(gè)任務(wù)的數(shù)組，并返回一個(gè)新的Promise，直到所有任務(wù)都完成才會(huì)解析。 3.處理異步錯(cuò)誤 async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); return data; } catch (error) { console.log('Error:', error); throw error; } } 在這個(gè)示例中，我們使用try/catch塊來捕獲可能出現(xiàn)的異步錯(cuò)誤。如果發(fā)生錯(cuò)誤，它將被捕獲并打印出來，然后被重新拋出。 4.順序執(zhí)行異步任務(wù) async function performTasks() { await doTask1(); await doTask2(); console.log('All tasks completed'); } 這個(gè)函數(shù)按照順序執(zhí)行兩個(gè)異步任務(wù)，并在兩個(gè)任務(wù)都完成后打印一條消息。 5.異步循環(huán) async function processItems(items) { for (const item of items) { await processItem(item); } console.log('All items processed'); } 在這個(gè)例子中，我們使用await在循環(huán)中處理每個(gè)項(xiàng)目。在處理完所有項(xiàng)目后，將打印一條消息。 6.延遲執(zhí)行 function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function delayedTask() { console.log('Task started'); await delay(2000); console.log('Task completed'); } delay函數(shù)返回一個(gè)Promise，經(jīng)過指定的延遲時(shí)間后解析。在delayedTask函數(shù)中，我們使用await讓任務(wù)在經(jīng)過2秒的延遲后才繼續(xù)執(zhí)行。 7.條件異步執(zhí)行 async function performTask(condition) { if (condition) { await doTask1(); } else { await doTask2(); } console.log('Task completed'); } 在這個(gè)示例中，我們使用條件語句來決定要執(zhí)行的異步任務(wù)。根據(jù)條件的不同，將執(zhí)行不同的任務(wù)，并在任務(wù)完成后打印一條消息。 8.并行執(zhí)行異步任務(wù) async function performTasks() { const [result1, result2] = await Promise.all([doTask1(), doTask2()]); console.log('Tasks completed:', result1, result2); } 通過使用Promise.all和解構(gòu)賦值，我們可以并行執(zhí)行多個(gè)異步任務(wù)，并在它們都完成后獲取結(jié)果。 9.處理多個(gè)并發(fā)請(qǐng)求 async function fetchData() { const [data1, data2] = await Promise.all([ fetch('https://api.example.com/data1').then(response => response.json()), fetch('https://api.example.com/data2').then(response => response.json()) ]); console.log('Data fetched:', data1, data2); } 在這個(gè)示例中，我們使用Promise.all來并發(fā)請(qǐng)求多個(gè)數(shù)據(jù)源，并等待它們的響應(yīng)。一旦所有數(shù)據(jù)都被解析為JSON格式，我們就可以對(duì)其進(jìn)行處理。 10.鏈?zhǔn)疆惒讲僮?/p> async function performTasks() { const result = await doTask1() .then(response => doTask2(response)) .then(result2 => doTask3(result2)); console.log('Tasks completed:', result); } 在這個(gè)示例中，我們使用.then方法將多個(gè)異步任務(wù)鏈接在一起。doTask1完成后，它的結(jié)果將傳遞給doTask2，然后再將結(jié)果傳遞給doTask3。最終的結(jié)果將在最后的.then塊中獲取并打印出來。 本文來自博客園，作者：喆星高照，轉(zhuǎn)載請(qǐng)注明原文鏈接：https://www.cnblogs.com/houxianzhou/p/17921756.html 該文章在 2024/1/27 11:36:15 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
