10個必備的 async/await 工具函式

喆星高照發表於2023-12-22
AI函式

| 當談到非同步程式設計時，async/await是JavaScript中常用的功能之一。下面是10個常用的await和async函式示例，以及對它們的程式碼用途的解析：

1.非同步獲取資料

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

 

該函式使用await關鍵字等待非同步請求返回的資料，並將其解析為JSON格式。這樣，我們可以在程式碼中以同步的方式處理資料，而無需使用回撥函式。

2.非同步執行多個任務

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

 

在這個例子中，我們使用await等待多個任務同時完成。Promise.all接收一個包含多個任務的陣列，並返回一個新的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塊來捕獲可能出現的非同步錯誤。如果發生錯誤，它將被捕獲並列印出來，然後被重新丟擲。

4.順序執行非同步任務

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

 

這個函式按照順序執行兩個非同步任務，並在兩個任務都完成後列印一條訊息。

5.非同步迴圈

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

 

在這個例子中，我們使用await在迴圈中處理每個專案。在處理完所有專案後，將列印一條訊息。

6.延遲執行

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函式返回一個Promise，經過指定的延遲時間後解析。在delayedTask函式中，我們使用await讓任務在經過2秒的延遲後才繼續執行。

7.條件非同步執行

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

 

在這個示例中，我們使用條件語句來決定要執行的非同步任務。根據條件的不同，將執行不同的任務，並在任務完成後列印一條訊息。

8.並行執行非同步任務

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

 

透過使用Promise.all和解構賦值，我們可以並行執行多個非同步任務，並在它們都完成後獲取結果。

9.處理多個併發請求

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來併發請求多個資料來源，並等待它們的響應。一旦所有資料都被解析為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函式示例展示了在非同步程式設計中如何使用它們。透過使用async/await，我們可以以更具可讀性和簡潔性的方式處理非同步操作，並使程式碼結構更清晰。

相關文章