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);
}
}
};
问题根源：
立即学习“Java免费学习笔记（深入）”；
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函数的方式。方法二更灵活，但代码略微复杂。
