JavaScript异步代码中try...catch失效分析及解决方案
在JavaScript开发中,处理异步操作中的异常是一项常见挑战。本文将通过一个案例分析,解释为什么try...catch语句有时无法捕获异步函数中的异常,并提供有效的解决方案。
问题描述:
以下代码片段中,refreshdata函数包含一个try...catch块,旨在捕获refreshtoken函数可能抛出的错误。然而,即使refreshtoken函数出错,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函数中Promise的用法。new Promise(async (resolve, reject) => { ... })这种写法并不理想,因为async函数内部的await操作不会被Promise正确处理。await暂停的是async函数本身,而非Promise的执行。 因此,refreshdata函数内部抛出的异常不会被request函数中的Promise捕获。
解决方案:
有两种方法可以解决这个问题:
方法一:将request函数声明为async函数
将request函数也声明为async函数,直接使用await等待refreshdata函数的执行。这样,refreshdata中产生的异常会被await自动捕获并向上抛出,request函数的调用者可以使用try...catch进行处理。
const request = async (url, method, data) => { if (isrefreshtoken) return; // 判断token超时,刷新token if (store.getters.expirestime && new Date().getTime() >= store.getters.expirestime) { await refreshdata(); return; } // ...其他代码... };
方法二:使用.then()和.catch()处理refreshdata的结果
保留new Promise结构,但在refreshdata函数执行完成后,使用.then()和.catch()方法分别处理成功和失败的情况。这种方法更清晰地处理异步操作的结果。
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).catch(reject); return; } // ...其他代码... }); };
重要说明: 这两种方法都是异步操作。即使使用了await,它只是异步代码的同步化写法,并非真正的同步代码。 选择哪种方法取决于代码的整体结构和个人偏好。 方法二更符合Promise的规范,更易于理解和维护。