JavaScript异步代码中try...catch失效分析及解决方案
在JavaScript开发中，妥善处理异步操作的错误至关重要。本文将剖析一段代码，解释其异步函数中try...catch块未能捕获预期错误的原因，并提供相应的解决方案。
代码的核心在于request函数和refreshdata函数的交互。request函数发起网络请求，并在token过期时调用refreshdata函数刷新token。refreshdata函数内部使用try...catch块处理refreshtoken函数可能抛出的错误。然而，即使refreshtoken函数出错，catch块也未执行。
问题代码：
立即学习“Java免费学习笔记（深入）”；
<code class="javascript">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);
}
}
};</code>
问题根源：
问题在于request函数中new Promise的使用方式。Promise构造函数内部使用了async函数，导致await refreshdata()产生的错误不会被Promise的reject函数捕获。await关键字使异步代码看起来像同步代码，但其异步本质不变，错误处理需与Promise机制正确结合。
解决方案：
提供两种解决方案：
方案一：将request函数声明为async函数
直接使用await等待refreshdata的结果，refreshdata中的try...catch块即可正常捕获错误，并通过Promise机制传递到request函数的调用方。
<code class="javascript">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;
}
// ...其他代码
};</code>
方案二：在request函数中使用Promise的then和catch方法
将refreshdata的返回值（一个Promise对象）正确传递给then和catch方法。
<code class="javascript">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;
}
// ...其他代码
});
};</code>
总结：
虽然使用了await，但这仍然是异步代码，并非同步代码。await只改变了代码书写方式，其异步本质不变。正确的错误处理仍然依赖于Promise机制。 选择方案一通常更简洁易读。
