JavaScript异步代码中try...catch失效分析及解决方案
本文分析一段JavaScript代码,该代码试图在异步操作中使用try...catch处理错误,但未能捕获异常。我们将解释原因并提供解决方案。
问题代码:
let isrefreshtoken = false; const request = (url, method, data) => { 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(async (resolve, reject) => { ... })这种非最佳实践。async函数内部的await会暂停Promise的执行,但不会将await内部函数抛出的异常传递给Promise的reject函数。因此,refreshdata函数中的try...catch虽然能捕获refreshtoken函数的异常,但该异常不会被request函数捕获。
解决方案:
有两种方法解决此问题:
方法一:将request函数声明为async函数
将request函数改为async函数,直接使用await等待refreshdata函数的执行。这样,refreshdata函数中抛出的异常会自动向上冒泡,最终被request函数的调用者捕获(或导致程序崩溃)。
const request = async (url, method, data) => { if (isrefreshtoken) return; // 判断token超时,刷新token if (store.getters.expirestime && new Date().getTime() >= store.getters.expirestime) { await refreshdata(); return; } // ...其他代码 };
方法二:在request函数中正确处理refreshdata的Promise
保持request函数返回Promise对象,但在refreshdata函数执行完成后,正确调用resolve或reject函数处理结果和错误。
const request = (url, method, data) => { 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,代码仍然是异步的,而非同步的。 选择哪种方法取决于代码的整体架构和需求。 方法一更简洁,但可能需要调整调用request函数的方式。方法二更灵活,但代码略微复杂。