你真的融会贯通了 javascript 中的异步编程了吗？-平芜编程栈

JavaScript异步编程进阶指南：从回调地狱到优雅异步

在实际的开发中，你是不是遇到过这样的bug，明明是已经调用了A方法，却拿不到A方法返回的数据？或者这个bug是偶现的。

引言

作为前端开发者，我们每天都在与异步操作打交道——API请求、DOM事件、定时器等。随着应用复杂度的提升，如何优雅地处理异步代码成为了衡量代码质量的重要标准。本文将深入探讨JavaScript异步编程的演进历程，从回调函数的缺陷到Promise的最佳实践，再到async/await的使用技巧，最后聚焦于并发控制与错误处理，帮助你写出更加健壮、可维护的异步代码。

本文将深入探讨JavaScript异步编程的高级技巧，帮助你理解各种异步模式的优缺点，并掌握最佳实践。无论你是想优化现有代码，还是想深入理解异步编程的原理，这篇文章都将为你提供有价值的参考。

回调函数的缺陷与解决方案
- 回调地狱的形成
- 回调函数的信任问题
- 解决方案：Promise的诞生
Promise的最佳实践
- Promise链的正确使用
- 错误处理机制
- Promise.all与Promise.race的应用场景
- Promise的性能优化
async/await的使用技巧
- 异步代码的同步化表达
- 错误处理的优雅方式
- 与Promise的结合使用
- 性能考量
并发控制与错误处理
- 并发请求的限制
- 批量处理与节流
- 全局错误处理策略
- 重试机制的实现

正文内容

1. 回调函数的缺陷与解决方案

1.1 回调地狱的形成

回调函数是JavaScript中最早的异步编程模式，它通过将一个函数作为参数传递给另一个函数，在异步操作完成后被调用。然而，当我们需要执行一系列相互依赖的异步操作时，代码会变得嵌套很深，形成所谓的"回调地狱"（Callback Hell）。

代码示例：回调地狱

// 模拟异步操作：获取用户信息getUser(userId,function(user){// 获取用户的文章列表getArticles(user.id,function(articles){// 获取第一篇文章的评论getComments(articles[0].id,function(comments){// 获取第一个评论者的信息getUser(comments[0].userId,function(commenter){// 最终处理数据console.log('评论者信息:',commenter);},function(error){console.error('获取评论者信息失败:',error);});},function(error){console.error('获取评论失败:',error);});},function(error){console.error('获取文章失败:',error);});},function(error){console.error('获取用户信息失败:',error);});

回调地狱的特点：

代码嵌套层级深，可读性差
错误处理分散，难以维护
代码复用性低，逻辑冗余
调试困难，难以追踪执行流程

1.2 回调函数的信任问题

除了回调地狱，传统的回调模式还存在"信任问题"（Trust Issues）：

多次调用：回调函数可能被调用0次或多次
过早调用：在异步操作完成前被调用
过晚调用：在异步操作完成很久后才被调用
调用顺序错误：不符合预期的调用顺序
参数传递错误：传递了错误的参数
吞掉错误：忽略了错误处理

代码示例：存在信任问题的回调函数

// 一个不可信的异步函数functionunreliableAsyncOperation(callback){// 可能会被调用两次setTimeout(()=>{callback('result');callback('result again');// 错误：重复调用},1000);// 可能会忽略错误处理try{// 一些可能抛出错误的操作thrownewError('内部错误');}catch(error){// 吞掉了错误，没有通知调用者}}// 使用该函数unreliableAsyncOperation(function(result){console.log('操作结果:',result);});

1.3 解决方案：Promise的诞生

为了解决回调函数的缺陷，ES6引入了Promise对象。Promise提供了一种链式调用的方式，使得异步代码的结构更加扁平，同时解决了信任问题。

Promise的基本结构：

// 创建一个Promiseconstpromise=newPromise((resolve,reject)=>{// 异步操作setTimeout(()=>{if(operationSuccess){resolve(result);// 成功时调用}else{reject(error);// 失败时调用}},1000);});// 使用Promisepromise.then(result=>{// 处理成功结果returnnextAsyncOperation(result);}).then(nextResult=>{// 处理下一个结果}).catch(error=>{// 统一处理错误});

Promise解决的信任问题：

回调函数只会被调用一次（无论成功或失败）
回调函数会在异步操作完成后被调用
支持链式调用，确保执行顺序
统一的错误处理机制
可以返回新的Promise，实现复杂的异步流程

2. Promise的最佳实践

2.1 Promise链的正确使用

Promise的链式调用是其最强大的特性之一，它允许我们将多个异步操作按顺序连接起来，同时保持代码的扁平结构。

代码示例：正确的Promise链

// 错误示例：嵌套的PromisegetUser(userId).then(user=>{getArticles(user.id).then(articles=>{getComments(articles[0].id).then(comments=>{console.log('Comments:',comments);});});});// 正确示例：链式调用getUser(userId).then(user=>getArticles(user.id)).then(articles=>getComments(articles[0].id)).then(comments=>console.log('Comments:',comments)).catch(error=>console.error('Error:',error));

链式调用的关键点：

在每个then方法中返回一个新的Promise或值
避免在then方法内部嵌套Promise
使用单个catch方法统一处理链中的所有错误

2.2 错误处理机制

Promise提供了统一的错误处理机制，通过catch方法捕获链中的所有错误。

代码示例：Promise错误处理

// 基本错误处理getUser(userId).then(user=>getArticles(user.id)).then(articles=>getComments(articles[0].id)).then(comments=>console.log('Comments:',comments)).catch(error=>{console.error('Operation failed:',error);// 可以在这里添加错误恢复逻辑});// 局部错误处理Promise.resolve(1).then(result=>{thrownewError('Something went wrong');returnresult+1;}).catch(error=>{console.error('First error:',error);return10;// 错误恢复，返回一个新值}).then(result=>{console.log('Recovered result:',result);// 输出: Recovered result: 10returnresult+1;});

错误处理的最佳实践：

始终在Promise链的末尾添加catch方法
可以在链的中间添加catch方法进行局部错误处理和恢复
使用finally方法执行无论成功或失败都需要执行的清理操作

2.3 Promise.all、Promise.allSettled、Promise.race的应用场景

Promise提供了多个强大的静态方法用于处理多个Promise：

Promise.all：等待所有Promise完成，返回一个包含所有结果的数组，如果其中一个失败，马上抛出异常
Promise.race：等待第一个完成的Promise，无论是成功还是失败，返回该Promise的结果
Promise.allSettled：等待所有Promise完成，不管是失败还是成功

代码示例：Promise.all的应用

// 并行获取多个资源constpromises=[getUser(userId),getArticles(userId),getComments(userId)];Promise.all(promises).then(([user,articles,comments])=>{console.log('User:',user);console.log('Articles:',articles);console.log('Comments:',comments);}).catch(error=>{console.error('At least one operation failed:',error);});

代码示例：Promise.race的应用

// 实现请求超时机制constrequestWithTimeout=(url,timeout=5000)=>{constrequest=fetch(url);consttimeoutPromise=newPromise((_,reject)=>{setTimeout(()=>reject(newError('Request timed out')),timeout);});returnPromise.race([request,timeoutPromise]);};// 使用带超时的请求requestWithTimeout('https://api.example.com/data').then(response=>response.json()).then(data=>console.log('Data:',data)).catch(error=>console.error('Error:',error));

2.4 Promise的性能优化

代码示例：Promise性能优化

// 错误示例：串行执行独立的异步操作constfetchAllData=async()=>{constusers=awaitgetUsers();constarticles=awaitgetArticles();constcomments=awaitgetComments();return{users,articles,comments};};// 正确示例：并行执行独立的异步操作constfetchAllDataOptimized=async()=>{const[users,articles,comments]=awaitPromise.all([getUsers(),getArticles(),getComments()]);return{users,articles,comments};};

性能优化的关键点：

对于相互独立的异步操作，使用Promise.all并行执行
避免在不必要的地方创建Promise
使用Promise.resolve和Promise.reject快速创建已解决或已拒绝的Promise

3. async/await的使用技巧

3.1 异步代码的同步化表达

ES7引入的async/await语法糖，使得异步代码可以像同步代码一样编写，大大提高了代码的可读性和可维护性。async/await本质上是基于Promise的封装，让异步操作的流程更加直观。

代码示例：async/await的基本使用

// 使用Promise的代码getUser(userId).then(user=>getArticles(user.id)).then(articles=>getComments(articles[0].id)).then(comments=>console.log('Comments:',comments)).catch(error=>console.error('Error:',error));// 使用async/await的代码asyncfunctionfetchComments(){try{constuser=awaitgetUser(userId);constarticles=awaitgetArticles(user.id);constcomments=awaitgetComments(articles[0].id);console.log('Comments:',comments);}catch(error){console.error('Error:',error);}}fetchComments();

async/await的优势：

代码结构更接近同步代码，可读性更高
错误处理使用try/catch，符合直觉
可以使用普通的控制流语句（if/else、for/while）
调试更方便，可以在await语句处设置断点

3.2 错误处理的优雅方式

async/await结合try/catch提供了一种非常优雅的错误处理方式，让我们可以像处理同步代码错误一样处理异步代码错误。

代码示例：async/await的错误处理

// 基本错误处理asyncfunctionfetchData(){try{constuser=awaitgetUser(userId);constarticles=awaitgetArticles(user.id);returnarticles;}catch(error){console.error('获取数据失败:',error);// 可以在这里添加错误恢复逻辑return[];}}// 局部错误处理asyncfunctionfetchWithPartialErrorHandling(){constuser=awaitgetUser(userId).catch(error=>{console.error('获取用户信息失败:',error);return{id:'default'};// 返回默认值继续执行});constarticles=awaitgetArticles(user.id);returnarticles;}// 自定义错误类型classNetworkErrorextendsError{constructor(message){super(message);this.name='NetworkError';}}asyncfunctionfetchWithCustomError(){try{constresponse=awaitfetch('https://api.example.com/data');if(!response.ok){thrownewNetworkError(`HTTP error! status:${response.status}`);}constdata=awaitresponse.json();returndata;}catch(error){if(errorinstanceofNetworkError){console.error('网络错误:',error.message);}else{console.error('其他错误:',error);}}}

3.3 与Promise的结合使用

async/await和Promise并不是互斥的，它们可以很好地结合使用，特别是在处理并发操作时。

代码示例：async/await与Promise结合

// 并行执行多个异步操作asyncfunctionfetchMultipleData(){try{// 使用Promise.all并行执行const[user,articles,comments]=awaitPromise.all([getUser(userId),getArticles(userId),getComments(userId)]);console.log('User:',user);console.log('Articles:',articles);console.log('Comments:',comments);return{user,articles,comments};}catch(error){console.error('至少一个操作失败:',error);}}// 使用Promise.race实现超时控制asyncfunctionfetchWithTimeout(url,timeout=5000){constcontroller=newAbortController();constsignal=controller.signal;consttimeoutPromise=newPromise((_,reject)=>{setTimeout(()=>{controller.abort();reject(newError('Request timed out'));},timeout);});try{constresponse=awaitPromise.race([fetch(url,{signal}),timeoutPromise]);returnawaitresponse.json();}catch(error){if(error.name==='AbortError'){thrownewError('Request timed out');}throwerror;}}

3.4 性能考量

虽然async/await让代码更易读，但如果使用不当，也可能导致性能问题。

代码示例：async/await的性能优化

// 错误示例：串行执行独立的异步操作asyncfunctionfetchAllData(){constusers=awaitgetUsers();// 等待完成constarticles=awaitgetArticles();// 等待完成constcomments=awaitgetComments();// 等待完成return{users,articles,comments};}// 正确示例：并行执行独立的异步操作asyncfunctionfetchAllDataOptimized(){// 同时启动所有异步操作constusersPromise=getUsers();constarticlesPromise=getArticles();constcommentsPromise=getComments();// 等待所有操作完成constusers=awaitusersPromise;constarticles=awaitarticlesPromise;constcomments=awaitcommentsPromise;return{users,articles,comments};}// 更简洁的写法asyncfunctionfetchAllDataClean(){const[users,articles,comments]=awaitPromise.all([getUsers(),getArticles(),getComments()]);return{users,articles,comments};}

性能优化的关键点：

对于相互独立的异步操作，使用Promise.all并行执行
避免在循环中使用await，这会导致串行执行
使用Promise.all处理批量异步操作
合理使用缓存减少重复的异步请求

4. 并发控制与错误处理

4.1 并发请求的限制

在实际开发中，我们经常需要处理大量的异步请求。如果同时发送过多请求，可能会导致服务器压力过大或浏览器性能问题。因此，实现并发请求的限制是非常重要的。

代码示例：并发请求限制

/** * 并发请求限制器 * @param {Array} urls - 请求URL数组 * @param {number} limit - 最大并发数 * @param {Function} fetchFn - 自定义fetch函数 * @returns {Promise<Array>} - 所有请求结果的数组 */asyncfunctionconcurrentRequestLimit(urls,limit=5,fetchFn=fetch){constresults=[];constexecuting=[];letindex=0;constexecuteNext=async()=>{if(index>=urls.length){returnPromise.resolve();}consturl=urls[index++];constpromise=fetchFn(url).then(response=>response.json()).then(result=>{results.push(result);}).catch(error=>{results.push(null);// 记录错误，但不中断执行console.error(`请求${url}失败:`,error);}).finally(()=>{// 从执行队列中移除已完成的请求constindex=executing.indexOf(promise);if(index>-1){executing.splice(index,1);}});executing.push(promise);// 如果执行队列未满，继续执行下一个请求if(executing.length<limit){awaitexecuteNext();}returnpromise;};// 启动初始的limit个请求constinitialPromises=Array(limit).fill(null).map(executeNext);awaitPromise.all(initialPromises);// 等待所有请求完成awaitPromise.all(executing);returnresults;}// 使用示例consturls=Array(20).fill().map((_,i)=>`https://api.example.com/data/${i}`);concurrentRequestLimit(urls,3).then(results=>{console.log('所有请求完成:',results);}).catch(error=>{console.error('并发请求失败:',error);});令牌桶算法可以更灵活地控制并发请求的速率。// 基于令牌桶的并发控制classTokenBucket{constructor(capacity,refillRate){this.capacity=capacity;this.tokens=capacity;this.refillRate=refillRate;this.lastRefillTime=Date.now();}asynctake(){// 补充令牌this.refill();// 如果没有足够的令牌，等待while(this.tokens<1){awaitnewPromise(resolve=>setTimeout(resolve,100));this.refill();}this.tokens--;}refill(){constnow=Date.now();consttimeElapsed=now-this.lastRefillTime;constnewTokens=(timeElapsed/1000)*this.refillRate;if(newTokens>0){this.tokens=Math.min(this.capacity,this.tokens+newTokens);this.lastRefillTime=now;}}}// 使用令牌桶进行并发控制asyncfunctionfetchWithTokenBucket(urls,bucket){constresults=[];for(consturlofurls){awaitbucket.take();// 获取令牌results.push(fetch(url));}returnPromise.all(results);}// 创建令牌桶：容量3，每秒补充1个令牌constbucket=newTokenBucket(3,1);consturls=Array.from({length:10},(_,i)=>`https://api.example.com/data/${i}`);fetchWithTokenBucket(urls,bucket).then(results=>console.log('所有请求完成:',results)).catch(error=>console.error('请求失败:',error));

4.2 批量处理与节流

对于大量的数据处理，我们可以采用批量处理的方式，将数据分成多个批次进行处理，每批次之间添加适当的延迟，以避免系统资源被过度占用。

代码示例：批量处理与节流

/** * 批量处理函数 * @param {Array} items - 需要处理的项目数组 * @param {number} batchSize - 每批次处理的数量 * @param {Function} processFn - 处理单个项目的函数 * @param {number} delay - 批次之间的延迟时间（毫秒） * @returns {Promise<Array>} - 所有处理结果的数组 */asyncfunctionbatchProcess(items,batchSize=10,processFn,delay=0){constresults=[];for(leti=0;i<items.length;i+=batchSize){constbatch=items.slice(i,i+batchSize);// 并行处理当前批次的所有项目constbatchResults=awaitPromise.all(batch.map(item=>processFn(item).catch(error=>{console.error(`处理项目失败:`,error);returnnull;})));results.push(...batchResults);// 如果不是最后一批，添加延迟if(i+batchSize<items.length&&delay>0){awaitnewPromise(resolve=>setTimeout(resolve,delay));}}returnresults;}// 使用示例constdataItems=Array(100).fill().map((_,i)=>({id:i,value:`Item${i}`}));asyncfunctionprocessItem(item){// 模拟异步处理returnnewPromise(resolve=>{setTimeout(()=>{resolve(`Processed${item.value}`);},Math.random()*100);});}batchProcess(dataItems,10,processItem,100).then(results=>{console.log('批量处理完成:',results);});// 节流函数/** * 节流函数 * @param {Function} func - 需要节流的函数 * @param {number} limit - 时间限制（毫秒） * @returns {Function} - 节流后的函数 */functionthrottle(func,limit){letinThrottle;returnfunction(...args){if(!inThrottle){func.apply(this,args);inThrottle=true;setTimeout(()=>inThrottle=false,limit);}};}// 使用示例constthrottledFetch=throttle(async(url)=>{constresponse=awaitfetch(url);constdata=awaitresponse.json();console.log('Data:',data);},1000);// 即使快速连续调用，也会限制为每秒一次throttledFetch('https://api.example.com/data');throttledFetch('https://api.example.com/data');throttledFetch('https://api.example.com/data');

4.3 全局错误处理策略

在大型应用中，实现全局错误处理策略可以帮助我们统一管理和监控异步操作的错误，提高应用的稳定性和可维护性。

代码示例：全局错误处理

// 全局Promise错误处理window.addEventListener('unhandledrejection',event=>{event.preventDefault();// 阻止默认行为console.error('未处理的Promise拒绝:',event.reason);// 可以在这里添加错误上报逻辑});// 全局异步函数错误处理asyncfunctionglobalErrorHandler(fn,...args){try{returnawaitfn(...args);}catch(error){console.error('全局错误处理:',error);// 错误上报reportErrorToServer(error);// 错误恢复或降级处理returnhandleErrorGracefully(error);}}// 使用示例asyncfunctionfetchData(url){constresponse=awaitfetch(url);if(!response.ok){thrownewError(`HTTP error! status:${response.status}`);}returnresponse.json();}// 使用全局错误处理包装异步函数constsafeFetchData=(...args)=>globalErrorHandler(fetchData,...args);safeFetchData('https://api.example.com/data').then(data=>console.log('Data:',data))// 这里不需要catch，因为已经在globalErrorHandler中处理了.then(data=>console.log('Processed data:',data));// 应用层面的错误边界classErrorBoundaryextendsReact.Component{constructor(props){super(props);this.state={hasError:false,error:null};}staticgetDerivedStateFromError(error){return{hasError:true,error};}componentDidCatch(error,errorInfo){console.error('组件错误:',error,errorInfo);// 错误上报reportErrorToServer(error,errorInfo);}render(){if(this.state.hasError){// 渲染错误UIreturn<div>发生错误:{this.state.error.message}</div>;}returnthis.props.children;}}// 使用错误边界<ErrorBoundary><AsyncComponent/></ErrorBoundary>

4.4 重试机制的实现

在网络请求等不稳定的异步操作中，实现重试机制可以提高操作的成功率。我们可以根据不同的错误类型和重试策略来设计重试机制。

代码示例：重试机制

/** * 带重试机制的异步函数 * @param {Function} asyncFn - 异步函数 * @param {Object} options - 重试选项 * @param {number} options.maxRetries - 最大重试次数 * @param {number} options.delay - 重试延迟（毫秒） * @param {Function} options.shouldRetry - 判断是否应该重试的函数 * @returns {Promise} - 异步操作结果 */asyncfunctionwithRetry(asyncFn,options={}){const{maxRetries=3,delay=1000,shouldRetry=(error)=>true}=options;letlastError;for(letretryCount=0;retryCount<=maxRetries;retryCount++){try{if(retryCount>0){console.log(`重试${retryCount}/${maxRetries}...`);// 指数退避策略constcurrentDelay=delay*Math.pow(2,retryCount-1);awaitnewPromise(resolve=>setTimeout(resolve,currentDelay));}returnawaitasyncFn();}catch(error){lastError=error;if(retryCount===maxRetries||!shouldRetry(error)){break;}}}throwlastError;}// 使用示例asyncfunctionfetchWithRetry(url,options={}){returnwithRetry(()=>fetch(url,options),{maxRetries:3,delay:1000,shouldRetry:(error)=>{// 只对网络错误或5xx错误进行重试return!error.response||error.response.status>=500;}});}// 使用带重试的fetchfetchWithRetry('https://api.example.com/data').then(response=>response.json()).then(data=>console.log('Data:',data)).catch(error=>console.error('最终请求失败:',error));// 更复杂的重试策略asyncfunctionfetchWithAdvancedRetry(url){returnwithRetry(()=>fetch(url),{maxRetries:5,shouldRetry:(error)=>{// 针对不同错误类型采用不同策略if(error.name==='NetworkError'){returntrue;// 网络错误总是重试}if(error.response&&error.response.status===429){// 处理请求过多错误returntrue;}returnfalse;},delay:(retryCount)=>{// 随机延迟，避免所有重试同时发生constbaseDelay=1000;constjitter=Math.random()*1000;returnbaseDelay*Math.pow(2,retryCount)+jitter;}});}

总结

JavaScript异步编程是现代前端开发的核心技能，本文系统介绍了从回调函数到async/await的演进历程，以及并发控制和错误处理的最佳实践：

回调函数：虽然简单直接，但容易导致"回调地狱"和信任问题，是异步编程的基础。
Promise：通过链式调用解决了回调地狱问题，提供了统一的异步操作接口，支持并行执行和错误传播。
async/await：将异步代码同步化表达，进一步提高了代码的可读性和可维护性，是当前异步编程的主流方式。
并发控制：通过并发请求限制、批量处理和节流等技术，可以有效控制异步操作的执行数量和频率，避免资源过度占用。
错误处理：全局错误处理、重试机制和优雅降级等策略，可以提高应用的稳定性和用户体验。

在实际开发中，我们应该根据具体场景选择合适的异步编程方式：

简单异步操作可以使用回调函数
需要链式调用或并行执行的场景适合使用Promise
复杂的异步流程推荐使用async/await
大量并发请求需要考虑使用并发控制

掌握这些异步编程技术，不仅可以提高代码质量和开发效率，还可以构建出更加高效、稳定和用户友好的应用。

参考资料

MDN Web Docs: Promise
MDN Web Docs: async/await
JavaScript异步编程
Concurrency Control in JavaScript

如果你觉得本文对你有帮助，欢迎点赞、收藏、分享，也欢迎关注我，获取更多前端技术干货！