封装---优化try..catch错误处理方式
一.简介
异步操作无处不在，尤其是接口调用场景。然而，传统的 try-catch 错误处理方式在面对多层异步操作时，很容易让代码陷入嵌套的 “地狱”，不仅影响可读性，还增加了维护成本。
加上我比较懒
1.嵌套 try-catch 的痛点:
就像下面的代码:
async function getUserInfo(userid) {try {const response = await getuserinfo(userid)console.log(response.name)try {const data = await getuserpost(response.name)console.log(data)try {const comments = await getusercomment(response.name)console.log(comments)} catch (err) {console.error(err)}} catch (err) {console.error(err)}} catch (error) {console.error(error)}
}这段代码的逻辑其实很简单，就是依次调用三个接口获取用户信息、用户帖子和用户评论。但由于每个异步操作都需要单独的错误处理，导致代码层层嵌套，形成了丑陋的 “金字塔结构”。这种代码不仅看起来费劲，而且当逻辑变得更复杂时，维护起来更是让人头疼。
2.灵感来源：Go 语言的错误处理模式
在 Go 语言中，错误处理采用了一种非常直接的方式，函数通常会返回结果和错误两个值，开发者可以显式地判断是否发生了错误。这种模式的优点是清晰明了，避免了深层嵌套。
在 JavaScript 中也可以实现类似的机制。对于任何异步接口调用，无非就是两种结果：成功或失败。那我们是不是可以封装一个通用的处理函数，让它返回一个包含成功结果和错误信息的数组呢？
const [Response, Error] = await apiRequest(fetch('/api'))
if (Error) {console.log(Error)
}
// 处理返回值代码部分
console.log(Response)这种方式既保留了错误处理的显式性，又能有效避免代码嵌套，简直是解决异步错误处理难题的理想方案。
二.实现通用的 try-catch 封装函数
这个函数需要接收一个 Promise 对象作为参数，然后在内部进行 try-catch 处理，最后返回 [结果，错误] 的数组形式。
// 封装 try-catch 的通用方法
async function to(promise) {try {const response = await promise;return [response, null]; // 返回 [成功结果, null]} catch (error) {return [null, error]; // 返回 [null, 错误对象]}
}优化后的代码效果
有了这个封装函数，我们来重构之前那段嵌套混乱的代码：
async function getUserInfo(userid) {// 获取用户信息const [userResponse, userError] = await to(getuserinfo(userid));if (userError) {console.error('获取用户信息失败:', userError);return;}console.log(userResponse.name);// 获取用户帖子const [postData, postError] = await to(getuserpost(userResponse.name));if (postError) {console.error('获取用户帖子失败:', postError);return;}console.log(postData);// 获取用户评论const [comments, commentError] = await to(getusercomment(userResponse.name));if (commentError) {console.error('获取用户评论失败:', commentError);return;}console.log(comments);
}代码变成了线性执行的流程，每个步骤的错误处理都清晰可见。我们可以很直观地看到每一步的操作以及对应的错误处理逻辑，大大提升了代码的可读性和可维护性。
三.优化,加上输出的格式化统一处理,减少代码量
这个简单的封装函数还可以根据实际需求进行扩展。比如，我们可以添加默认的错误处理逻辑，或者对错误信息进行格式化：
async function to(promise, errorMessage = '操作失败') {try {const response = await promise;return [response, null];} catch (error) {const formattedError = new Error(`${errorMessage}: ${error.message}`);return [null, formattedError];}
}在使用时，就可以更清晰地定位错误发生的位置：
const [userResponse, userError] = await to(getuserinfo(userid), '获取用户信息失败');这种 Go 式的错误处理模式在 JavaScript 中的应用，本质上是将 “异常捕获” 转换为 “显式判断”。它可能会增加几行判断代码，但换来的是更清晰的代码结构和更灵活的错误处理方式。
四.批量处理(我个人习惯)
我个人习惯分类api接口,并且放在一个对象中,方便导出导入使用(下面的这种形式)
export const student_API = {get_info: () => {return http.get('/student/info')},get_score: () => {return http.get('/student/score')}// ....
}在这个基础下,通过遍历对象进行二次包装以实现批量处理
上面两个中,第一个可以实现对当个接口使用,第二个实现批量使用,把他们两个封装为工具函数到utils目录下,方便团队使用
如何使用:
比如接口写成一个对象包裹的形式
在同级的index.js文件中导入上面的文件以及批量处理函数进行一次遍历,接着进行导出
这样就可以在项目中尽情使用了
注意:我的这个没有添加错误信息的统一处理,代码太多就懒得改了,大佬们可以添加批量统一处理错误信息根据第三个部分内容修改,再改为TypeScript代码更好
附上一张我们可爱的回忆宝宝(^_^)