10個必備的JavaScript?async/await工具函數(shù)分享

更新時間：2023年12月22日 16:08:45 作者：喆星高照

當談到異步編程時,async/await是JavaScript中常用的功能之一,本文為大家整理了10個常用的await和async函數(shù)示例,感興趣的小伙伴可以參考一下

1.異步獲取數(shù)據(jù)

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

該函數(shù)使用await關鍵字等待異步請求返回的數(shù)據(jù)，并將其解析為JSON格式。這樣，我們可以在代碼中以同步的方式處理數(shù)據(jù)，而無需使用回調函數(shù)。

2.異步執(zhí)行多個任務

async function performTasks() {
  const task1 = doTask1();
  const task2 = doTask2();
  await Promise.all([task1, task2]);
  console.log('Tasks completed');
}

在這個例子中，我們使用await等待多個任務同時完成。Promise.all接收一個包含多個任務的數(shù)組，并返回一個新的Promise，直到所有任務都完成才會解析。

3.處理異步錯誤

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;
  }
}

在這個示例中，我們使用try/catch塊來捕獲可能出現(xiàn)的異步錯誤。如果發(fā)生錯誤，它將被捕獲并打印出來，然后被重新拋出。

4.順序執(zhí)行異步任務

async function performTasks() {
  await doTask1();
  await doTask2();
  console.log('All tasks completed');
}

這個函數(shù)按照順序執(zhí)行兩個異步任務，并在兩個任務都完成后打印一條消息。

5.異步循環(huán)

async function processItems(items) {
  for (const item of items) {
    await processItem(item);
  }
  console.log('All items processed');
}

在這個例子中，我們使用await在循環(huán)中處理每個項目。在處理完所有項目后，將打印一條消息。

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ù)返回一個Promise，經(jīng)過指定的延遲時間后解析。在delayedTask函數(shù)中，我們使用await讓任務在經(jīng)過2秒的延遲后才繼續(xù)執(zhí)行。

7.條件異步執(zhí)行

async function performTask(condition) {
  if (condition) {
    await doTask1();
  } else {
    await doTask2();
  }
  console.log('Task completed');
}

在這個示例中，我們使用條件語句來決定要執(zhí)行的異步任務。根據(jù)條件的不同，將執(zhí)行不同的任務，并在任務完成后打印一條消息。

8.并行執(zhí)行異步任務

async function performTasks() {
  const [result1, result2] = await Promise.all([doTask1(), doTask2()]);
  console.log('Tasks completed:', result1, result2);
}

通過使用Promise.all和解構賦值，我們可以并行執(zhí)行多個異步任務，并在它們都完成后獲取結果。

9.處理多個并發(fā)請求

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);
}

在這個示例中，我們使用Promise.all來并發(fā)請求多個數(shù)據(jù)源，并等待它們的響應。一旦所有數(shù)據(jù)都被解析為JSON格式，我們就可以對其進行處理。

10.鏈式異步操作

async function performTasks() {
  const result = await doTask1()
    .then(response => doTask2(response))
    .then(result2 => doTask3(result2));
  console.log('Tasks completed:', result);
}

在這個示例中，我們使用.then方法將多個異步任務鏈接在一起。doTask1完成后，它的結果將傳遞給doTask2，然后再將結果傳遞給doTask3。最終的結果將在最后的.then塊中獲取并打印出來。

這些常用的await和async函數(shù)示例展示了在異步編程中如何使用它們。通過使用async/await，我們可以以更具可讀性和簡潔性的方式處理異步操作，并使代碼結構更清晰。

到此這篇關于10個必備的JavaScript async/await工具函數(shù)分享的文章就介紹到這了,更多相關JavaScript async/await內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: