async 实现 js

async/await 的基本用法

async/await 是 JavaScript 中处理异步操作的语法糖，基于 Promise 实现。async 用于声明一个函数是异步的，await 用于等待 Promise 的解决。

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

错误处理方式

使用 try/catch 块捕获异步操作中的错误，确保代码的健壮性。

async function fetchDataWithHandling() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

并行执行多个异步操作

通过 Promise.all 实现多个异步操作的并行执行，提升效率。

async function fetchMultipleData() {
  const [userData, productData] = await Promise.all([
    fetch('/api/user').then(res => res.json()),
    fetch('/api/products').then(res => res.json())
  ]);
  return { userData, productData };
}

在循环中使用 async/await

在循环中处理异步操作时，需注意顺序执行与并行执行的差异。

async function processArray(array) {
  for (const item of array) {
    await processItem(item); // 顺序执行
  }

  await Promise.all(array.map(item => processItem(item))); // 并行执行
}

顶层 await 的使用

现代 JavaScript 环境支持在模块顶层直接使用 await，无需包装在 async 函数中。

const data = await fetchData();
console.log(data);