如果你也对异步 JavaScript 感到头疼，不妨试试以下这 7 个简单实用的技巧，它们可以让你重新爱上这项技术！

1.使用 Promise.allSettled() 进行更安全的批量处理

当你需要处理多个 Promise 时，Promise.all() 一旦遇到一个失败的 Promise 就会终止整个操作。而 Promise.allSettled() 则会等待所有 Promise 都完成（无论成功还是失败），并返回每个 Promise 的状态和值或错误信息。

const results = await Promise.allSettled([
  fetchData1(),
  fetchData2(),
  fetchData3(),
]);

results.forEach(result => {
  if (result.status === 'fulfilled') {
    console.log('成功:', result.value);
  } else {
    console.error('失败:', result.reason);
  }
});

通过这种方式，你可以安全地处理所有操作，而不用担心单个失败会影响整体流程。

2.为 Promise 添加超时功能，防止卡死

有些 Promise 可能会因为种种原因长时间悬而未决，为它们添加一个超时限制可以保护你的应用程序。

const withTimeout = (promise, ms) =>
  Promise.race([
    promise,
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('操作超时')), ms)
    ),
  ]);

try {
  const data = await withTimeout(fetchData(), 5000);
} catch (err) {
  console.error(err.message); // 如果超时，将输出 "操作超时"
}

通过这种方式，即使某个操作卡住，也不会拖累整个应用。

3.使用 for...of 实现顺序异步循环

虽然 forEach() 是个好工具，但它不能很好地支持 async/await。使用 for...of 进行顺序异步操作更加直观：

const urls = ['url1', 'url2', 'url3'];
for (const url of urls) {
  const data = await fetch(url);
  console.log(data);
}

这种方法可以确保每个请求依次执行，而不会互相干扰。

4.用 await 实现动态延时

在异步操作之间添加延时，可以通过 await 实现简单而优雅的方式，而不会阻塞主线程：

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

console.log('开始');
await delay(2000); // 等待 2 秒
console.log('结束');

这种技巧在模拟异步环境或控制操作节奏时非常有用。

5.在异步函数中始终使用 try...catch

即使在 async 函数中，也需要用 try...catch 来捕获错误。将其作为一种习惯，可以避免遗漏异常处理：

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('请求失败');
    return await response.json();
  } catch (err) {
    console.error('错误:', err.message);
    return null;
  }
}

这样可以确保函数的健壮性，即使请求失败也能 gracefully 处理。

6.在循环外使用 await 实现批量处理

如果操作不需要按顺序执行，可以通过批量处理提升性能：

const urls = ['url1', 'url2', 'url3'];
const responses = await Promise.all(urls.map(url => fetch(url)));
const data = await Promise.all(responses.map(res => res.json()));
console.log(data);

这种方法适合需要并行处理多个任务的场景，例如批量获取数据。

7.结合 Async/Await 和生成器处理复杂流程

生成器函数可以用作异步流程中的“检查点”，让复杂的逻辑变得更容易理解：

function* generator() {
  yield fetchData1();
  yield fetchData2();
  yield fetchData3();
}

const runGenerator = async gen => {
  const iterator = gen();
  for (const promise of iterator) {
    console.log(await promise);
  }
};

await runGenerator(generator);

这种方式可以让异步代码的逻辑更加清晰，尤其是在需要分阶段处理的场景下。