在ES6+时代，JavaScript异步编程经历了重大变革。虽然async/await语法显著提升了代码可读性，但在某些场景下直接操作Promise和利用新特性能带来更精细的控制。1. Promise链式操作
fetch('https://api.example.com/data') .then(response => { if (!response.ok) throw new Error('Network issue') return response.json() }) .then(data => { console.log('Processed data:', data) return processFurther(data) }) .then(finalResult => { saveToDB(finalResult) }) .catch(error => { console.error('Error chain:', error) showUserError(error) }) .finally(() => { hideLoadingIndicator() })
优势特征：
显式数据流向
统一错误处理
资源清理保证
2. 高级Promise组合器
并行控制
const [user, posts] = await Promise.all([ fetch('/user'), fetch('/posts')]);
Promise.all([ fetch('/user').then(r => r.json()), fetch('/posts').then(r => r.json())]).then(([userData, postsData]) => { renderDashboard(userData, postsData)}).catch(handleGlobalError);
全量结果收集
Promise.allSettled([ fetch('/primary'), fetch('/fallback')]).then(results => { const successful = results.filter(r => r.status === 'fulfilled') const errors = results.filter(r => r.status === 'rejected') })
竞速策略
Promise.any([ fetchFastEndpoint(), fetchSlowButReliableEndpoint()]).then(firstResponse => { }).catch(allErrored => { })
3. 微任务调度优化
function batchUpdates(callback) { let queue = [];
return function(...args) { queue.push(args);
queueMicrotask(() => { if (queue.length > 0) { const snapshot = queue; queue = []; callback(snapshot); } }); };}
4. 事件驱动模式
class AsyncProcessor extends EventTarget { constructor() { super(); this.addEventListener('process', this.handleEvent); }
handleEvent = (e) => { intensiveCalculation(e.detail) .then(result => { this.dispatchEvent( new CustomEvent('completed', { detail: result }) ) }) }}
5. 响应式编程模式
function createObservable(fn) { const subscribers = new Set();
const notify = value => { queueMicrotask(() => { subscribers.forEach(sub => sub(value)) }) }
fn({ next: notify, error: err => notify({ error: err }), complete: () => notify({ done: true }) });
return { subscribe: callback => { subscribers.add(callback) return () => subscribers.delete(callback) } }}
6.错误处理示例
fetchCriticalData() .then(validateResponse) .then(data => transformData(data) .catch(transformationError => { return getFallbackData() }) ) .then(finalizeProcessing) .catch(rootError => { logToMonitoring(rootError) emergencyRecovery() })
关键策略：
7.性能优化
请求竞速：Promise.race()
惰性加载：new Promise(resolve => { /* 按需初始化 */ })
缓存策略：
const apiCache = new Map();
function cachedFetch(url) { if (apiCache.has(url)) { return Promise.resolve(apiCache.get(url)) }
return fetch(url) .then(r => r.json()) .then(data => { apiCache.set(url, data) return data })}
8.现代浏览器API整合
navigator.serviceWorker.ready .then(registration => { return registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: VAPID_KEY }) }) .then(subscription => { return sendToServer('/register', subscription) }) .then(confirmSubscription)
注意：
优先选择声明式编程风格
保持Promise链的纯净性（避免混合回调）
善用finally进行状态清理
复杂场景优先使用组合器
浏览器兼容性检测：
if (typeof Promise.allSettled === 'function') { } else { }
结语
通过合理运用Promise链式调用、组合器、微任务控制等现代特性，可以在不依赖async/await语法的情况下，构建出高性能、高可维护性的异步系统。这些方案不仅适用于现代浏览器环境，在Serverless、Web Worker等场景中也展现出色表现。
该文章在 2025/4/19 14:49:28 编辑过
400 186 1886
