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

2023-12-22 18:00:57

| 當談到非同步程式設計時,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,我們可以以更具可讀性和簡潔性的方式處理非同步操作,並使程式碼結構更清晰。