在ES6+時(shí)代，JavaScript異步編程經(jīng)歷了重大變革。雖然async/await語法顯著提升了代碼可讀性，但在某些場景下直接操作Promise和利用新特性能帶來更精細(xì)的控制。1. Promise鏈?zhǔn)讲僮?/span>
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() })
優(yōu)勢(shì)特征：
顯式數(shù)據(jù)流向
統(tǒng)一錯(cuò)誤處理
資源清理保證
2. 高級(jí)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);
全量結(jié)果收集
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. 微任務(wù)調(diào)度優(yōu)化
function batchUpdates(callback) { let queue = [];
return function(...args) { queue.push(args);
queueMicrotask(() => { if (queue.length > 0) { const snapshot = queue; queue = []; callback(snapshot); } }); };}
4. 事件驅(qū)動(dòng)模式
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. 響應(yīng)式編程模式
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.錯(cuò)誤處理示例
fetchCriticalData() .then(validateResponse) .then(data => transformData(data) .catch(transformationError => { return getFallbackData() }) ) .then(finalizeProcessing) .catch(rootError => { logToMonitoring(rootError) emergencyRecovery() })
關(guān)鍵策略：
層級(jí)化錯(cuò)誤處理
局部恢復(fù)機(jī)制
關(guān)鍵錯(cuò)誤隔離
7.性能優(yōu)化
請(qǐng)求競速：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.現(xiàn)代瀏覽器API整合
navigator.serviceWorker.ready .then(registration => { return registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: VAPID_KEY }) }) .then(subscription => { return sendToServer('/register', subscription) }) .then(confirmSubscription)
注意：
優(yōu)先選擇聲明式編程風(fēng)格
保持Promise鏈的純凈性（避免混合回調(diào)）
善用finally進(jìn)行狀態(tài)清理
復(fù)雜場景優(yōu)先使用組合器
瀏覽器兼容性檢測(cè)：
if (typeof Promise.allSettled === 'function') { } else { }
結(jié)語
通過合理運(yùn)用Promise鏈?zhǔn)秸{(diào)用、組合器、微任務(wù)控制等現(xiàn)代特性，可以在不依賴async/await語法的情況下，構(gòu)建出高性能、高可維護(hù)性的異步系統(tǒng)。這些方案不僅適用于現(xiàn)代瀏覽器環(huán)境，在Serverless、Web Worker等場景中也展現(xiàn)出色表現(xiàn)。
該文章在 2025/4/19 14:49:28 編輯過
400 186 1886
