在JavaScript/TypeScript的异步编程中,async/await让我们的代码看起来更像是同步的,极大地提高了可读性。然而,错误处理仍然是一个需要仔细考虑的问题。今天我要分享一种优雅的错误处理模式,它能让你的异步代码更加简洁。
传统try-catch的问题
我们通常这样处理异步错误:
async function fetchData() {try {const response = await fetch('api/data');const data = await response.json();// 处理数据} catch (error) {// 处理错误console.error('Fetch failed:', error);}
}
这种方式虽然有效,但当有多个await操作时,代码会变得冗长,而且所有错误都会被同一个catch块捕获,难以区分错误来源。
更优雅的解决方案:awaitTo
下面介绍一个简单的工具函数,它能改变我们处理异步错误的方式:
/*** 异步函数包装器,用于处理异步函数的错误* @example const [err, res] = await awaitTo(promise)*/
const awaitTo = (promise: Promise<any>) => promise.then((res) => [null, res]).catch((err) => [err, null]);
使用示例
async function fetchData() {const [err, data] = await awaitTo(fetch('api/data').then(r => r.json()));if (err) {console.error('Fetch failed:', err);return;}// 安全地使用dataconsole.log('Data:', data);
}
多个异步操作的场景
async function fetchMultiple() {const [userErr, user] = await awaitTo(getUser());const [postsErr, posts] = await awaitTo(getPosts());if (userErr || postsErr) {// 可以精确知道哪个请求失败了console.error('Errors:', { userErr, postsErr });return;}// 安全地使用user和postsconsole.log({ user, posts });
}
为什么这种模式更好?
- 更简洁:避免了嵌套的try-catch块
- 更明确:每个异步操作都有独立的错误变量
- 更灵活:可以轻松处理部分成功的情况
- Go语言风格:类似于Go语言的多返回值错误处理模式
注意事项
- 这种方法不适合需要自动重试或复杂错误恢复的场景
- 对于简单的单个异步操作,传统try-catch可能更直接
- 确保在所有代码路径上都处理了错误
总结
awaitTo
这个小工具为async/await提供了另一种"食用方法",让我们的异步代码更加简洁明了。它特别适合需要同时处理多个独立异步操作的场景。不妨在你的下一个项目中试试这种模式,看看它是否能提升你的开发体验!
你平时如何处理异步错误?欢迎在评论区分享你的经验和看法。