摘要:当你需要处理多个 Promise 时,Promise.all 一旦遇到一个失败的 Promise 就会终止整个操作。而 Promise.allSettled 则会等待所有 Promise 都完成(无论成功还是失败),并返回每个 Promise 的状态和值或错误
如果你也对异步 JavaScript 感到头疼,不妨试试以下这 7 个简单实用的技巧,它们可以让你重新爱上这项技术!
当你需要处理多个 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); }});通过这种方式,你可以安全地处理所有操作,而不用担心单个失败会影响整体流程。
有些 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); // 如果超时,将输出 "操作超时"}通过这种方式,即使某个操作卡住,也不会拖累整个应用。
虽然 forEach 是个好工具,但它不能很好地支持 async/await。使用 for...of 进行顺序异步操作更加直观:
const urls = ['url1', 'url2', 'url3'];for (const url of urls) { const data = await fetch(url); console.log(data);}这种方法可以确保每个请求依次执行,而不会互相干扰。
在异步操作之间添加延时,可以通过 await 实现简单而优雅的方式,而不会阻塞主线程:
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));console.log('开始');await delay(2000); // 等待 2 秒console.log('结束');这种技巧在模拟异步环境或控制操作节奏时非常有用。
即使在 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 处理。
如果操作不需要按顺序执行,可以通过批量处理提升性能:
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);这种方法适合需要并行处理多个任务的场景,例如批量获取数据。
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);这种方式可以让异步代码的逻辑更加清晰,尤其是在需要分阶段处理的场景下。
来源:散文随风想