封装---优化try..catch错误处理方式

一.简介

异步操作无处不在，尤其是接口调用场景。然而，传统的 try-catch 错误处理方式在面对多层异步操作时，很容易让代码陷入嵌套的 "地狱"，不仅影响可读性，还增加了维护成本。

加上我比较懒

1.嵌套 try-catch 的痛点:

就像下面的代码:

TypeScript 复制代码

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 中也可以实现类似的机制。对于任何异步接口调用，无非就是两种结果：成功或失败。那我们是不是可以封装一个通用的处理函数，让它返回一个包含成功结果和错误信息的数组呢？

TypeScript 复制代码

const [Response, Error] = await apiRequest(fetch('/api'))
if (Error) {
  console.log(Error)
}
// 处理返回值代码部分
console.log(Response)

这种方式既保留了错误处理的显式性，又能有效避免代码嵌套，简直是解决异步错误处理难题的理想方案。

二.实现通用的 try-catch 封装函数

这个函数需要接收一个 Promise 对象作为参数，然后在内部进行 try-catch 处理，最后返回 [结果，错误] 的数组形式。

TypeScript 复制代码

// 封装 try-catch 的通用方法
async function to(promise) {
  try {
    const response = await promise;
    return [response, null]; // 返回 [成功结果, null]
  } catch (error) {
    return [null, error]; // 返回 [null, 错误对象]
  }
}

优化后的代码效果

有了这个封装函数，我们来重构之前那段嵌套混乱的代码：

TypeScript 复制代码

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);
}

代码变成了线性执行的流程，每个步骤的错误处理都清晰可见。我们可以很直观地看到每一步的操作以及对应的错误处理逻辑，大大提升了代码的可读性和可维护性。

三.优化,加上输出的格式化统一处理,减少代码量

这个简单的封装函数还可以根据实际需求进行扩展。比如，我们可以添加默认的错误处理逻辑，或者对错误信息进行格式化：

TypeScript 复制代码

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];
  }
}

在使用时，就可以更清晰地定位错误发生的位置：

TypeScript 复制代码

const [userResponse, userError] = await to(getuserinfo(userid), '获取用户信息失败');

这种 Go 式的错误处理模式在 JavaScript 中的应用，本质上是将 "异常捕获" 转换为 "显式判断"。它可能会增加几行判断代码，但换来的是更清晰的代码结构和更灵活的错误处理方式。

四.批量处理(我个人习惯)

我个人习惯分类api接口,并且放在一个对象中,方便导出导入使用(下面的这种形式)

TypeScript 复制代码

export const student_API = {
  get_info: () => {
    return http.get('/student/info')
  },
  get_score: () => {
    return http.get('/student/score')
  }
  // ....
}

在这个基础下,通过遍历对象进行二次包装以实现批量处理

上面两个中,第一个可以实现对当个接口使用,第二个实现批量使用,把他们两个封装为工具函数到utils目录下,方便团队使用

如何使用:

比如接口写成一个对象包裹的形式

在同级的index.js文件中导入上面的文件以及批量处理函数进行一次遍历,接着进行导出

这样就可以在项目中尽情使用了

注意:我的这个没有添加错误信息的统一处理,代码太多就懒得改了,大佬们可以添加批量统一处理错误信息根据第三个部分内容修改,再改为TypeScript代码更好

附上一张我们可爱的回忆宝宝(^_^)