JavaScript异步代码中try...catch失效分析及解决方案
在JavaScript开发中,妥善处理异步操作的错误至关重要。本文将剖析一段代码,解释其异步函数中try...catch块未能捕获预期错误的原因,并提供相应的解决方案。
代码的核心在于request函数和refreshdata函数的交互。request函数发起网络请求,并在token过期时调用refreshdata函数刷新token。refreshdata函数内部使用try...catch块处理refreshtoken函数可能抛出的错误。然而,即使refreshtoken函数出错,catch块也未执行。
问题代码:
let isrefreshtoken = false; const request = (url: string, method: string, data?: any) => { return new Promise(async (resolve, reject) => { if (isrefreshtoken) return; // 判断token超时,刷新token if (store.getters.expirestime && new Date().getTime() >= store.getters.expirestime) { await refreshdata(); return; } // ...其他代码 }); }; const refreshdata = async () => { if (!isrefreshtoken) { isrefreshtoken = true; if (!store.getters.refertoken) { cleandata(); isrefreshtoken = false; } else { console.log(123); try { let res = await refreshtoken(store.getters.refertoken); store.dispatch('saveinfo', res); isrefreshtoken = false; uni.switchTab({ url: '/pages/device/index' }); } catch (error) { cleandata(); } console.log(333); } } };
问题根源:
问题在于request函数中new Promise的使用方式。Promise构造函数内部使用了async函数,导致await refreshdata()产生的错误不会被Promise的reject函数捕获。await关键字使异步代码看起来像同步代码,但其异步本质不变,错误处理需与Promise机制正确结合。
解决方案:
提供两种解决方案:
方案一:将request函数声明为async函数
直接使用await等待refreshdata的结果,refreshdata中的try...catch块即可正常捕获错误,并通过Promise机制传递到request函数的调用方。
const request = async (url: string, method: string, data?: any) => { if (isrefreshtoken) return; // 判断token超时,刷新token if (store.getters.expirestime && new Date().getTime() >= store.getters.expirestime) { await refreshdata(); return; } // ...其他代码 };
方案二:在request函数中使用Promise的then和catch方法
将refreshdata的返回值(一个Promise对象)正确传递给then和catch方法。
const request = (url: string, method: string, data?: any): Promise<unknown> => { return new Promise((resolve, reject) => { if (isRefreshToken) return; // 判断token超时,刷新token if (Store.getters.expiresTime && new Date().getTime() >= Store.getters.expiresTime) { refreshData().then(resolve, reject); return; } // ...其他代码 }); };
总结:
虽然使用了await,但这仍然是异步代码,并非同步代码。await只改变了代码书写方式,其异步本质不变。正确的错误处理仍然依赖于Promise机制。 选择方案一通常更简洁易读。