当前位置：首页 > news >正文

别再死记硬背了！用这5个真实场景，彻底搞懂Promise.all、race、any、allSettled的区别

news 2026/4/22 2:42:22

5个真实开发场景，彻底掌握Promise并发控制方法

前端开发中，异步操作无处不在。当多个异步任务需要协同处理时，Promise提供的并发控制方法就显得尤为重要。很多开发者虽然知道Promise.all、race、any和allSettled这些方法，但在实际项目中却不知道如何选择。本文将带你通过5个真实开发场景，深入理解这些方法的区别和应用。

1. 文件批量上传：Promise.allSettled的容错之道

在后台管理系统中，文件批量上传是一个常见需求。假设我们需要上传10个文件，传统做法可能是：

const uploadFiles = async (files) => { const results = []; for (const file of files) { try { const result = await uploadSingleFile(file); results.push(result); } catch (error) { results.push({ error: error.message }); } } return results; };

这种串行上传效率低下，而如果使用Promise.all：

Promise.all(files.map(uploadSingleFile)) .then(handleSuccess) .catch(handleError);

一旦某个文件上传失败，整个操作就会立即终止，这显然不符合需求。这时Promise.allSettled就是最佳选择：

const results = await Promise.allSettled( files.map(file => uploadSingleFile(file)) ); const successfulUploads = results .filter(result => result.status === 'fulfilled') .map(result => result.value); const failedUploads = results .filter(result => result.status === 'rejected') .map(result => result.reason); console.log(`成功上传${successfulUploads.length}个文件`); if (failedUploads.length) { console.warn('以下文件上传失败:', failedUploads); }

关键区别：

Promise.all: 一个失败全盘皆输
Promise.allSettled: 无论成功失败都会返回结果

2. 竞速加载：Promise.race优化用户体验

在图片或资源加载场景中，我们常常需要实现"谁快用谁"的功能。比如，我们有多个CDN资源，希望使用最先加载完成的：

const loadFromCDN1 = fetch('https://cdn1.example.com/image.jpg'); const loadFromCDN2 = fetch('https://cdn2.example.com/image.jpg'); const loadFromCDN3 = fetch('https://cdn3.example.com/image.jpg'); Promise.race([loadFromCDN1, loadFromCDN2, loadFromCDN3]) .then(response => { // 使用最先返回的CDN资源 displayImage(response.url); }) .catch(error => { console.error('所有CDN加载失败', error); });

更实用的做法是结合超时控制：

const fetchWithTimeout = (url, timeout = 3000) => { return Promise.race([ fetch(url), new Promise((_, reject) => setTimeout(() => reject(new Error('请求超时')), timeout) ) ]); }; // 使用示例 fetchWithTimeout('https://api.example.com/data') .then(handleData) .catch(handleError);

注意事项：

Promise.race只关心第一个完成的结果，无论成功还是失败
其他未完成的Promise仍会继续执行，只是结果被忽略

3. 关键数据加载：Promise.all的强一致性

在某些场景下，我们需要确保所有依赖数据都加载成功才能继续。比如电商网站的结算页面，需要同时获取：

用户地址信息
商品库存状态
优惠券可用性

const loadCheckoutData = async () => { try { const [addresses, inventory, coupons] = await Promise.all([ fetchUserAddresses(), checkInventory(), getAvailableCoupons() ]); renderCheckoutPage({ addresses, inventory, coupons }); } catch (error) { showErrorModal('无法加载结算所需数据，请重试'); redirectToCart(); } };

对比分析：

方法	成功条件	失败条件	适用场景
Promise.all	全部成功	任一失败	强依赖的多数据加载
Promise.race	第一个完成	第一个失败	竞速加载、超时控制
Promise.any	任一成功	全部失败	备用资源加载
allSettled	全部完成(无论成败)	不会进入catch	需要完整结果的批量操作

4. 备用资源加载：Promise.any的优雅降级

在微服务架构中，我们可能需要从多个服务端点获取相同数据，只要有一个可用即可。这时Promise.any就派上用场了：

const primaryService = fetch('https://primary.service/api/data'); const fallbackService1 = fetch('https://fallback1.service/api/data'); const fallbackService2 = fetch('https://fallback2.service/api/data'); try { const response = await Promise.any([ primaryService, fallbackService1, fallbackService2 ]); processData(await response.json()); } catch (errors) { console.error('所有服务端点均不可用:', errors); showEmergencyUI(); }

实际应用技巧：

将最稳定的服务放在数组前面
可以结合不同超时时间设置优先级
对于完全不可用的情况，errors是一个AggregateError，包含所有失败信息

5. 复杂场景组合应用

在实际开发中，我们常常需要组合使用这些方法。比如，一个仪表盘需要：

核心指标数据（必须全部加载）
次要指标数据（能加载多少是多少）
广告位（使用最快的CDN）

async function loadDashboard() { // 核心指标 - 必须全部成功 const coreMetrics = Promise.all([ fetchCoreMetric1(), fetchCoreMetric2(), fetchCoreMetric3() ]); // 次要指标 - 部分成功也可接受 const secondaryMetrics = Promise.allSettled([ fetchSecondary1(), fetchSecondary2() ]); // 广告资源 - 使用最快的CDN const adResource = Promise.race([ fetchAdFromCDN1(), fetchAdFromCDN2() ]); try { const [core, secondary, ad] = await Promise.all([ coreMetrics, secondaryMetrics, adResource.catch(() => null) // 广告加载失败不影响整体 ]); renderDashboard({ core, secondary: secondary.filter(m => m.status === 'fulfilled').map(m => m.value), ad }); } catch (error) { handleCriticalError(error); } }

性能优化点：

并行加载不同类型资源
根据重要性选择不同并发策略
非关键路径资源要有降级处理

深入理解实现原理

要真正掌握这些方法，了解它们的实现原理很有帮助。以下是简化版的实现：

// Promise.all 简化实现 Promise.myAll = function(promises) { return new Promise((resolve, reject) => { const results = []; let completed = 0; promises.forEach((promise, index) => { Promise.resolve(promise) .then(value => { results[index] = value; completed++; if (completed === promises.length) { resolve(results); } }) .catch(reject); }); }); }; // Promise.race 简化实现 Promise.myRace = function(promises) { return new Promise((resolve, reject) => { promises.forEach(promise => { Promise.resolve(promise).then(resolve).catch(reject); }); }); };

关键点分析：

都返回一个新的Promise
内部通过Promise.resolve包装，确保处理的是Promise对象
all需要收集所有结果，race只取第一个完成的值
all遇到第一个reject就会立即终止

常见误区与最佳实践

在实际使用中，开发者常会遇到以下问题：

误区1：忽略错误处理

// 不良实践 Promise.all([asyncTask1(), asyncTask2()]) .then(results => { // 处理结果 }); // 缺少catch处理 // 推荐做法 Promise.all([asyncTask1(), asyncTask2()]) .then(handleResults) .catch(logError) .finally(cleanup);

误区2：混淆race和any

// race: 第一个完成(无论成功失败) Promise.race([successPromise, errorPromise]) .then(handleFirstCompletion) .catch(handleFirstError); // any: 第一个成功(忽略前面所有失败) Promise.any([errorPromise, successPromise]) .then(handleFirstSuccess) .catch(handleAllFailures);

最佳实践建议：

始终处理错误情况
为长时间操作添加超时控制
合理使用finally进行清理
考虑使用Promise.allSettled获取完整结果
对于关键操作，记录每个Promise的执行状态

浏览器兼容性与polyfill

虽然现代浏览器都支持这些方法，但在旧环境中可能需要polyfill：

// Promise.allSettled polyfill if (!Promise.allSettled) { Promise.allSettled = function(promises) { return Promise.all(promises.map(p => Promise.resolve(p).then( value => ({ status: 'fulfilled', value }), reason => ({ status: 'rejected', reason }) ) )); }; } // Promise.any polyfill if (!Promise.any) { Promise.any = function(promises) { return new Promise((resolve, reject) => { let rejectedCount = 0; const errors = []; promises.forEach((promise, index) => { Promise.resolve(promise) .then(resolve) .catch(error => { errors[index] = error; rejectedCount++; if (rejectedCount === promises.length) { reject(new AggregateError( errors, 'All promises were rejected' )); } }); }); }); }; }

兼容性注意事项：

Promise.any是最新加入的方法，兼容性最差
在Node.js旧版本中可能需要polyfill
使用Babel等工具时可以自动注入polyfill

性能考量与优化策略

在大规模并发场景下，Promise并发控制的性能表现很重要：

1. 控制并发数量

一次性发起太多请求可能导致性能问题：

// 限制并发数量的Promise.all async function promiseAllWithLimit(promises, limit) { const results = []; const executing = new Set(); for (const promise of promises) { const p = Promise.resolve(promise).then(result => { executing.delete(p); return result; }); executing.add(p); results.push(p); if (executing.size >= limit) { await Promise.race(executing); } } return Promise.all(results); }

2. 避免内存泄漏

长时间挂起的Promise可能导致内存无法释放：

// 为Promise添加超时控制 function withTimeout(promise, timeout) { let timeoutId; const timeoutPromise = new Promise((_, reject) => { timeoutId = setTimeout(() => { reject(new Error(`Operation timed out after ${timeout}ms`)); }, timeout); }); return Promise.race([promise, timeoutPromise]).finally(() => { clearTimeout(timeoutId); }); }

3. 结果缓存

对于相同参数的请求，可以考虑缓存结果：

const cache = new Map(); function cachedFetch(url) { if (cache.has(url)) { return cache.get(url); } const promise = fetch(url) .then(response => response.json()) .catch(error => { cache.delete(url); throw error; }); cache.set(url, promise); return promise; }

测试策略与调试技巧

确保Promise并发代码正确性需要特别测试：

1. 单元测试示例

describe('Promise.all', () => { it('should resolve when all promises resolve', async () => { const promises = [ Promise.resolve(1), Promise.resolve(2), Promise.resolve(3) ]; const results = await Promise.all(promises); expect(results).toEqual([1, 2, 3]); }); it('should reject when any promise rejects', async () => { const promises = [ Promise.resolve(1), Promise.reject(new Error('fail')), Promise.resolve(3) ]; await expect(Promise.all(promises)).rejects.toThrow('fail'); }); });

2. 调试技巧

使用console.log标记Promise状态
在Chrome DevTools中查看Promise状态
使用async/await简化调试流程
添加详细的错误日志

function tracePromise(promise, name) { return promise .then(result => { console.log(`[${name}] resolved:`, result); return result; }) .catch(error => { console.error(`[${name}] rejected:`, error); throw error; }); } // 使用示例 Promise.all([ tracePromise(asyncTask1(), 'Task1'), tracePromise(asyncTask2(), 'Task2') ]);

实际项目架构中的应用

在大型项目中，Promise并发控制常用于：

1. 服务启动初始化

async function initializeServices() { const [db, cache, config] = await Promise.all([ connectDatabase(), initCacheCluster(), loadConfiguration() ]); return { db, cache, config }; }

2. 批量数据处理

async function processBatchRecords(records) { const batches = chunkArray(records, 100); // 分批处理 const results = []; for (const batch of batches) { const batchResults = await Promise.allSettled( batch.map(processSingleRecord) ); results.push(...batchResults); } return results; }

3. 微服务聚合

async function getProductDetails(productId) { const [basicInfo, inventory, reviews] = await Promise.all([ productService.getBasicInfo(productId), inventoryService.getStockInfo(productId), reviewService.getProductReviews(productId) ]); return { ...basicInfo, inventory, reviews }; }

高级应用场景

1. 优先级队列

async function executeWithPriority(tasks) { const results = []; for (const taskGroup of tasks) { const groupResults = await Promise.allSettled(taskGroup); results.push(...groupResults); // 如果有高优先级任务失败，提前终止 const criticalError = groupResults.find( r => r.status === 'rejected' && r.reason.isCritical ); if (criticalError) { throw criticalError.reason; } } return results; }

2. 渐进式加载

async function progressiveLoad(resources) { // 先加载核心资源 await Promise.all(resources.core.map(loadResource)); // 同时加载次要资源和首屏内容 await Promise.all([ Promise.allSettled(resources.secondary.map(loadResource)), loadAboveTheFoldContent() ]); // 最后加载剩余内容 await Promise.any([ loadRemainingContent(), timeout(2000) // 最多等待2秒 ]); }

3. 竞态条件处理

function createRaceController() { let currentWinner = null; return async function raceOperation(operationName, operation) { const result = await Promise.race([ operation(), new Promise((_, reject) => { if (currentWinner) { reject(new Error(`Operation superseded by ${currentWinner}`)); } }) ]); currentWinner = operationName; return result; }; }

与async/await的优雅结合

虽然Promise方法强大，但与async/await结合使用更清晰：

async function fetchUserData(userId) { try { const [profile, orders, preferences] = await Promise.all([ fetchProfile(userId), fetchOrders(userId), fetchPreferences(userId) ]); return { profile, orders, preferences }; } catch (error) { if (error.isPartialResult) { // 处理部分成功的情况 const partialResults = await Promise.allSettled([ fetchProfile(userId).catch(() => null), fetchOrders(userId).catch(() => []), fetchPreferences(userId).catch(() => defaultPrefs) ]); return processPartialResults(partialResults); } throw error; } }

最佳实践：

在顶层使用try/catch处理错误
合理使用Promise方法处理并发
在async函数内部可以使用await串行操作
对于复杂逻辑，可以混合使用.then()和await

错误处理的艺术

Promise并发控制的错误处理需要特别注意：

1. 错误分类处理

async function handleMultipleRequests() { const results = await Promise.allSettled([ apiRequestA(), apiRequestB(), apiRequestC() ]); results.forEach(result => { if (result.status === 'rejected') { if (result.reason.isNetworkError) { handleNetworkError(result.reason); } else if (result.reason.isServerError) { handleServerError(result.reason); } else { handleUnexpectedError(result.reason); } } }); }

2. 错误聚合

class MultiError extends Error { constructor(errors) { super('Multiple errors occurred'); this.errors = errors; } } async function aggregateOperations(operations) { const results = await Promise.allSettled(operations); const errors = results .filter(r => r.status === 'rejected') .map(r => r.reason); if (errors.length > 0) { throw new MultiError(errors); } return results.map(r => r.value); }

3. 重试机制

function withRetry(operation, maxRetries = 3) { return async function (...args) { let lastError; for (let i = 0; i < maxRetries; i++) { try { return await operation(...args); } catch (error) { lastError = error; if (!isRetryable(error)) break; await delay(1000 * (i + 1)); } } throw lastError; }; }

与前端框架的集成

在现代前端框架中，Promise并发控制有广泛应用：

1. React数据获取

function useInitialData() { const [data, setData] = useState(null); const [error, setError] = useState(null); useEffect(() => { let isMounted = true; Promise.all([fetchUser(), fetchPosts()]) .then(([user, posts]) => { if (isMounted) { setData({ user, posts }); } }) .catch(error => { if (isMounted) { setError(error); } }); return () => { isMounted = false; }; }, []); return { data, error }; }

2. Vue组合式API

export default { setup() { const state = reactive({ user: null, posts: null, error: null }); onMounted(async () => { try { const [user, posts] = await Promise.all([ fetchUser(), fetchPosts() ]); state.user = user; state.posts = posts; } catch (error) { state.error = error; } }); return { ...toRefs(state) }; } };

3. Angular服务初始化

@Injectable({ providedIn: 'root' }) export class AppInitService { constructor( private configService: ConfigService, private authService: AuthService ) {} init(): Promise<any> { return Promise.all([ this.configService.load(), this.authService.initialize() ]).catch(error => { // 处理初始化错误 throw error; }); } }

Node.js中的特殊应用

在服务端开发中，Promise并发控制有更多应用场景：

1. 数据库批量操作

async function migrateUsers(users) { const batchSize = 100; const batches = []; for (let i = 0; i < users.length; i += batchSize) { batches.push(users.slice(i, i + batchSize)); } const results = []; for (const batch of batches) { const batchResults = await Promise.allSettled( batch.map(user => UserModel.create(user)) ); results.push(...batchResults); } return results; }

2. 微服务并行调用

async function aggregateServiceData(userId) { const [profileService, orderService, recommendationService] = await Promise.all([ discoverService('profile-service'), discoverService('order-service'), discoverService('recommendation-service') ]); const [profile, orders, recommendations] = await Promise.all([ profileService.getProfile(userId), orderService.getOrders(userId), recommendationService.getForUser(userId) ]); return { profile, orders, recommendations }; }

3. 文件并行处理

async function processFilesInParallel(files) { const workerPool = new WorkerPool(4); // 4个工作线程 try { const results = await Promise.all( files.map(file => workerPool.process(file)) ); return results; } finally { await workerPool.terminate(); } }

浏览器API的并发控制

许多浏览器API返回Promise，可以结合并发控制使用：

1. 多资源预加载

function preloadCriticalResources() { const images = [ '/images/hero.jpg', '/images/logo.png', '/images/bg-pattern.jpg' ]; return Promise.all( images.map(src => { return new Promise((resolve, reject) => { const img = new Image(); img.src = src; img.onload = resolve; img.onerror = reject; }); }) ); }

2. 缓存多个API响应

async function warmAPICache() { const cache = await caches.open('api-cache'); const urls = [ '/api/user', '/api/products', '/api/categories' ]; await Promise.allSettled( urls.map(url => fetch(url).then(response => cache.put(url, response))) ); }

3. 并行执行多个Web Worker任务

async function runParallelComputations(tasks) { const workers = Array(4).fill(null).map(() => new Worker('compute.js')); try { const results = await Promise.all( tasks.map((task, i) => { const worker = workers[i % workers.length]; return worker.run(task); }) ); return results; } finally { workers.forEach(worker => worker.terminate()); } }

性能监控与指标收集

对于关键业务操作，监控Promise并发性能很重要：

1. 性能指标收集

async function trackPromisePerformance(promise, name) { const start = performance.now(); try { const result = await promise; const duration = performance.now() - start; reportSuccess(name, duration); return result; } catch (error) { const duration = performance.now() - start; reportFailure(name, duration, error); throw error; } } // 使用示例 await Promise.all([ trackPromisePerformance(loadUserData(), 'userData'), trackPromisePerformance(loadProductData(), 'productData') ]);

2. 并发度监控

class ConcurrencyMonitor { constructor(maxConcurrent) { this.maxConcurrent = maxConcurrent; this.active = 0; this.queue = []; } async run(promiseFactory) { if (this.active >= this.maxConcurrent) { await new Promise(resolve => this.queue.push(resolve)); } this.active++; try { const result = await promiseFactory(); return result; } finally { this.active--; if (this.queue.length > 0) { this.queue.shift()(); } } } }

3. 可视化监控面板

function createPromiseDashboard(promises) { const container = document.createElement('div'); promises.forEach((promise, i) => { const element = document.createElement('div'); element.textContent = `Promise ${i}: pending`; container.appendChild(element); promise .then(() => { element.textContent = `Promise ${i}: fulfilled`; element.style.color = 'green'; }) .catch(() => { element.textContent = `Promise ${i}: rejected`; element.style.color = 'red'; }); }); return container; }

安全注意事项

在使用Promise并发时，需要注意以下安全问题：

1. 拒绝服务防护

async function handleBatchRequests(requests, maxConcurrent = 10) { const results = []; const executing = new Set(); for (const request of requests) { if (executing.size >= maxConcurrent) { await Promise.race(executing); } const promise = processRequest(request) .then(result => { executing.delete(promise); return result; }); executing.add(promise); results.push(promise); } return Promise.all(results); }

2. 敏感数据处理

async function processSensitiveData(items) { // 串行处理敏感数据，避免并行导致的内存峰值 const results = []; for (const item of items) { const result = await encryptData(item); results.push(result); } return results; }

3. 错误信息过滤

async function safePromiseAll(promises) { const results = await Promise.allSettled(promises); return results.map(result => { if (result.status === 'rejected') { // 过滤敏感错误信息 const safeError = new Error('Operation failed'); safeError.code = result.reason.code; return { status: 'rejected', reason: safeError }; } return result; }); }

调试复杂Promise链的技巧

当Promise并发控制出现问题时，调试可能很困难：

1. 添加调试标识

function debugPromise(promise, name) { return promise.then( value => { console.log(`[${name}] resolved:`, value); return value; }, error => { console.error(`[${name}] rejected:`, error); throw error; } ); } // 使用示例 Promise.all([ debugPromise(task1(), 'task1'), debugPromise(task2(), 'task2') ]);

2. 可视化Promise状态

function visualizePromise(promise, elementId) { const element = document.getElementById(elementId); element.textContent = 'pending'; element.style.color = 'gray'; return promise .then(value => { element.textContent = 'fulfilled'; element.style.color = 'green'; return value; }) .catch(error => { element.textContent = 'rejected'; element.style.color = 'red'; throw error; }); }

3. 使用async_hooks（Node.js）

const async_hooks = require('async_hooks'); const promiseTracker = new Map(); const hook = async_hooks.createHook({ init(asyncId, type, triggerAsyncId) { if (type === 'PROMISE') { promiseTracker.set(asyncId, { creationStack: new Error().stack }); } }, destroy(asyncId) { promiseTracker.delete(asyncId); } }); hook.enable(); // 可以定期检查未完成的Promise setInterval(() => { console.log('Pending promises:', promiseTracker.size); }, 1000);

与函数式编程的结合

Promise并发控制可以与函数式编程范式很好结合：

1. 使用高阶函数

function withConcurrencyLimit(limit) { return function(fn) { const queue = []; let active = 0; return async function(...args) { if (active >= limit) { await new Promise(resolve => queue.push(resolve)); } active++; try { return await fn(...args); } finally { active--; if (queue.length > 0) { queue.shift()(); } } }; }; } // 使用示例 const limitedFetch = withConcurrencyLimit(3)(fetch); const results = await Promise.all(urls.map(limitedFetch));

2. Promise组合

function sequence(tasks) { return tasks.reduce( (promiseChain, currentTask) => promiseChain.then(chainResults => currentTask().then(currentResult => [...chainResults, currentResult]) ), Promise.resolve([]) ); } function parallel(tasks) { return Promise.all(tasks.map(task => task())); } // 组合使用 async function complexWorkflow() { const [phase1, phase2] = await sequence([ () => parallel([taskA, taskB]), () => parallel([taskC, taskD]) ]); return [...phase1, ...phase2]; }

3. 使用Promise工具库

// 使用bluebird的Promise.map控制并发 const Promise = require('bluebird'); async function processLargeDataset(items) { return Promise.map( items, async item => { return processItem(item); }, { concurrency: 5 } ); }

未来发展趋势

Promise并发控制仍在不断发展：

1. 顶级await

// 在模块顶层直接使用await const [user, product] = await Promise.all([ fetchUser(), fetchProduct() ]);

2. Promise.try

// 更优雅的同步错误捕获 Promise.try(() => { // 可能抛出同步错误的代码 return doSomething(); }).then(handleResult).catch(handleError);

3. 取消功能

// 使用AbortController取消Promise const controller = new AbortController(); const { signal } = controller; const fetchPromise = fetch(url, { signal }); // 取消请求 controller.abort();

4. 更智能的调度

// 基于优先级的Promise调度 const scheduler = new PriorityScheduler(); scheduler.schedule( highPriorityTask, { priority: 'high' } ); scheduler.schedule( lowPriorityTask, { priority: 'low' } );