如果你也对异步 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);这种方式可以让异步代码的逻辑更加清晰，尤其是在需要分阶段处理的场景下。
