JavaScript async/await 10个常用工具函数与代码解析

在JavaScript异步编程中，async/await是一项核心特性。以下整理了10个常用的async和await函数示例，并逐一解析其代码用途与适用场景。

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对象，只有当所有任务都执行完毕后，该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，doTask2的结果再传递给doTask3。最终结果在最后的.then块中获取并打印，实现异步操作的链式调用。

上述常用的async和await函数示例展示了在异步编程中如何灵活运用这些工具。借助async/await，开发者能够以更清晰、简洁的方式处理异步操作，显著提升代码的可读性与维护性。

本文介绍了10个必备的JavaScript async/await工具函数。如需了解更多JavaScript async/await相关内容，建议查阅本站过往文章或继续阅读后续系列文章，感谢支持。

10个必备的JavaScript async/await工具函数分享