网站地图怎么做_山东济南网站建设
在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提供了另一种"食用方法"，让我们的异步代码更加简洁明了。它特别适合需要同时处理多个独立异步操作的场景。不妨在你的下一个项目中试试这种模式，看看它是否能提升你的开发体验！
你平时如何处理异步错误？欢迎在评论区分享你的经验和看法。