如果你也對異步 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);
這種方式可以讓異步代碼的邏輯更加清晰，尤其是在需要分階段處理的場景下。
掌握這些技巧后，你會發現異步 JavaScript 不再難以駕馭。
該文章在 2025/1/22 10:01:25 編輯過
400 186 1886
