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的规范，更易于理解和维护。
