JavaScript异步代码中try...catch失效：为什么我的异步函数try...catch块无法捕获错误？-js教程-PHP中文网

JavaScript异步代码中try...catch失效：为什么我的异步函数try...catch块无法捕获错误？

心靈之曲

发布： 2025-02-27 08:40:13

原创

661人浏览过

javascript异步代码中try...catch失效：为什么我的异步函数try...catch块无法捕获错误？

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机制。选择方案一通常更简洁易读。

以上就是JavaScript异步代码中try...catch失效：为什么我的异步函数try...catch块无法捕获错误？的详细内容，更多请关注php中文网其它相关文章！