从 try-catch 回调到链式调用:更优雅的 async/await 错误处理方案
在 async/await 普及之前,我们的异步代码通常深陷回调地狱,阅读和维护成本极高。
getUserInfo((err, user) => {
if (err) { showError(); return; }
getUserDetail(user.id, (err, detail) => {
if (err) { showError(); return; }
render(detail);
});
});
引入 async/await 后,代码变得线性、清晰,这已经比回调时代好太多了。
async function loadUser() {
try {
const user = await getUserInfo();
const detail = await getUserDetail(user.id);
render(detail);
} catch (err) {
ElMessage.error('加载失败');
}
}
但在实际开发中,我发现这种模式在某些场景下依然存在问题。
真实业务场景下的痛点
1. 错误需要'分阶段处理'
比如一组初始化页面的请求,虽然可以用 Promise.all() 改写,但实际需求往往对不同的错误给出不一样的反馈。例如用户信息失败跳登录页,订单失败提示订单异常,优惠券请求失败只给 warning 但不影响主流程等。
如果强行用 try-catch 包裹所有逻辑,就无法实现差异化处理。于是只能写成这样:
async function initPage() {
let user;
try {
user = await getUserInfo();
} (e) {
();
;
}
order;
{
order = (user.);
} (e) {
.();
;
}
coupon;
{
coupon = (order.);
} (e) {
.();
}
({ user, order, coupon });
}


