1. 异步请求处理的痛点与Promise.all的价值在前端开发中处理多个异步请求是每个开发者都会遇到的经典场景。想象一下这样的需求我们需要同时获取用户基本信息、订单记录和推荐商品三个独立的数据然后统一渲染到页面上。如果按照传统回调方式逐个请求代码会陷入回调地狱不仅难以维护还会因为串行请求导致不必要的等待时间。这正是Promise.all大显身手的地方。这个ES6提供的API允许我们并行发起多个Promise请求并在所有请求完成后统一处理结果。我曾在电商项目中实测过三个平均耗时200ms的接口使用串行请求需要600ms以上而Promise.all能将总时间压缩到最慢的那个请求的耗时约210ms。2. Promise.all的核心机制解析2.1 基本语法与工作原理Promise.all接收一个Promise对象数组作为参数返回一个新的Promise对象。其核心特性可以概括为全成功才成功所有Promise都resolve时返回的Promise才会resolve结果是一个包含所有结果的数组一个失败即失败只要有一个Promise被reject整个Promise.all立即rejectconst requestUser fetch(/api/user) const requestOrders fetch(/api/orders) const requestProducts fetch(/api/products) Promise.all([requestUser, requestOrders, requestProducts]) .then(responses { // 三个请求都成功后的处理 }) .catch(error { // 任一请求失败的处理 })2.2 并行请求的底层实现虽然我们常说Promise.all是并行请求但严格来说JavaScript是单线程的。其并行效果实际是通过浏览器/Node.js的异步I/O机制实现的所有fetch请求几乎同时发起浏览器将这些HTTP请求放入任务队列当网络响应到达时对应的Promise状态变更Event Loop机制将完成的回调放入执行队列注意真正的并行发生在网络层JavaScript主线程只是非阻塞地等待结果3. 实战三个异步请求的最佳实践3.1 基础实现方案假设我们需要从三个不同接口获取数据const getUser () fetch(/user).then(res res.json()) const getOrders () fetch(/orders).then(res res.json()) const getProducts () fetch(/products).then(res res.json()) async function loadAllData() { try { const [user, orders, products] await Promise.all([ getUser(), getOrders(), getProducts() ]) console.log(加载完成:, {user, orders, products}) } catch (error) { console.error(加载失败:, error) } }3.2 错误处理进阶技巧实际项目中我们可能需要对部分接口失败做降级处理async function loadWithFallback() { const promises [ getUser().catch(() ({name: 默认用户})), getOrders().catch(() []), getProducts().catch(() []) ] const results await Promise.all(promises) // 即使部分接口失败也能获得有效数据 }4. 性能优化与边界情况处理4.1 请求超时控制为防止某个接口长时间无响应拖累整个应用可以添加超时控制const withTimeout (promise, timeout) Promise.race([ promise, new Promise((_, reject) setTimeout(() reject(new Error(请求超时)), timeout) ) ]) Promise.all([ withTimeout(getUser(), 5000), withTimeout(getOrders(), 3000), withTimeout(getProducts(), 3000) ])4.2 部分成功场景处理有时我们需要获取尽可能多的数据而不是遇到错误就全部放弃async function loadPartialData() { const promises [ getUser().then(value ({status: fulfilled, value})).catch(reason ({status: rejected, reason})), getOrders().then(value ({status: fulfilled, value})).catch(reason ({status: rejected, reason})), getProducts().then(value ({status: fulfilled, value})).catch(reason ({status: rejected, reason})) ] const results await Promise.all(promises) const successfulData results .filter(result result.status fulfilled) .map(result result.value) console.log(成功获取的数据:, successfulData) }5. 常见问题与解决方案5.1 内存泄漏问题当组件卸载时如果Promise.all还未完成回调中引用的组件状态可能导致内存泄漏// React示例 useEffect(() { let isMounted true Promise.all([getUser(), getOrders()]) .then(data { if(isMounted) { setState(data) } }) return () { isMounted false } }, [])5.2 请求取消方案现代浏览器支持AbortController实现请求取消const controller new AbortController() const fetchWithAbort url fetch(url, {signal: controller.signal}) Promise.all([ fetchWithAbort(/api/user), fetchWithAbort(/api/orders) ]) .then(/*...*/) .catch(err { if(err.name AbortError) { console.log(请求被取消) } }) // 需要取消时 controller.abort()6. 替代方案与适用场景虽然Promise.all很强大但某些场景下可能需要其他方案方案特点适用场景Promise.allSettled不关心成功失败只等所有结束数据收集场景Promise.race取第一个完成的结果竞速请求、超时控制串行执行按顺序执行Promise有依赖关系的请求我在实际项目中发现当三个请求之间没有依赖关系且都需要成功才能继续时Promise.all是最佳选择。但如果请求之间有先后依赖或者可以容忍部分失败就需要考虑其他方案了。
1. 异步请求处理的痛点与Promise.all的价值在前端开发中处理多个异步请求是每个开发者都会遇到的经典场景。想象一下这样的需求我们需要同时获取用户基本信息、订单记录和推荐商品三个独立的数据然后统一渲染到页面上。如果按照传统回调方式逐个请求代码会陷入回调地狱不仅难以维护还会因为串行请求导致不必要的等待时间。这正是Promise.all大显身手的地方。这个ES6提供的API允许我们并行发起多个Promise请求并在所有请求完成后统一处理结果。我曾在电商项目中实测过三个平均耗时200ms的接口使用串行请求需要600ms以上而Promise.all能将总时间压缩到最慢的那个请求的耗时约210ms。2. Promise.all的核心机制解析2.1 基本语法与工作原理Promise.all接收一个Promise对象数组作为参数返回一个新的Promise对象。其核心特性可以概括为全成功才成功所有Promise都resolve时返回的Promise才会resolve结果是一个包含所有结果的数组一个失败即失败只要有一个Promise被reject整个Promise.all立即rejectconst requestUser fetch(/api/user) const requestOrders fetch(/api/orders) const requestProducts fetch(/api/products) Promise.all([requestUser, requestOrders, requestProducts]) .then(responses { // 三个请求都成功后的处理 }) .catch(error { // 任一请求失败的处理 })2.2 并行请求的底层实现虽然我们常说Promise.all是并行请求但严格来说JavaScript是单线程的。其并行效果实际是通过浏览器/Node.js的异步I/O机制实现的所有fetch请求几乎同时发起浏览器将这些HTTP请求放入任务队列当网络响应到达时对应的Promise状态变更Event Loop机制将完成的回调放入执行队列注意真正的并行发生在网络层JavaScript主线程只是非阻塞地等待结果3. 实战三个异步请求的最佳实践3.1 基础实现方案假设我们需要从三个不同接口获取数据const getUser () fetch(/user).then(res res.json()) const getOrders () fetch(/orders).then(res res.json()) const getProducts () fetch(/products).then(res res.json()) async function loadAllData() { try { const [user, orders, products] await Promise.all([ getUser(), getOrders(), getProducts() ]) console.log(加载完成:, {user, orders, products}) } catch (error) { console.error(加载失败:, error) } }3.2 错误处理进阶技巧实际项目中我们可能需要对部分接口失败做降级处理async function loadWithFallback() { const promises [ getUser().catch(() ({name: 默认用户})), getOrders().catch(() []), getProducts().catch(() []) ] const results await Promise.all(promises) // 即使部分接口失败也能获得有效数据 }4. 性能优化与边界情况处理4.1 请求超时控制为防止某个接口长时间无响应拖累整个应用可以添加超时控制const withTimeout (promise, timeout) Promise.race([ promise, new Promise((_, reject) setTimeout(() reject(new Error(请求超时)), timeout) ) ]) Promise.all([ withTimeout(getUser(), 5000), withTimeout(getOrders(), 3000), withTimeout(getProducts(), 3000) ])4.2 部分成功场景处理有时我们需要获取尽可能多的数据而不是遇到错误就全部放弃async function loadPartialData() { const promises [ getUser().then(value ({status: fulfilled, value})).catch(reason ({status: rejected, reason})), getOrders().then(value ({status: fulfilled, value})).catch(reason ({status: rejected, reason})), getProducts().then(value ({status: fulfilled, value})).catch(reason ({status: rejected, reason})) ] const results await Promise.all(promises) const successfulData results .filter(result result.status fulfilled) .map(result result.value) console.log(成功获取的数据:, successfulData) }5. 常见问题与解决方案5.1 内存泄漏问题当组件卸载时如果Promise.all还未完成回调中引用的组件状态可能导致内存泄漏// React示例 useEffect(() { let isMounted true Promise.all([getUser(), getOrders()]) .then(data { if(isMounted) { setState(data) } }) return () { isMounted false } }, [])5.2 请求取消方案现代浏览器支持AbortController实现请求取消const controller new AbortController() const fetchWithAbort url fetch(url, {signal: controller.signal}) Promise.all([ fetchWithAbort(/api/user), fetchWithAbort(/api/orders) ]) .then(/*...*/) .catch(err { if(err.name AbortError) { console.log(请求被取消) } }) // 需要取消时 controller.abort()6. 替代方案与适用场景虽然Promise.all很强大但某些场景下可能需要其他方案方案特点适用场景Promise.allSettled不关心成功失败只等所有结束数据收集场景Promise.race取第一个完成的结果竞速请求、超时控制串行执行按顺序执行Promise有依赖关系的请求我在实际项目中发现当三个请求之间没有依赖关系且都需要成功才能继续时Promise.all是最佳选择。但如果请求之间有先后依赖或者可以容忍部分失败就需要考虑其他方案了。
函数详解)
在销售同比分析中的高效应用)
