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

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

聖光之護

发布： 2025-02-27 19:50:10

原创

923人浏览过

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

JavaScript异步代码中try...catch失效分析及解决方案

在JavaScript开发中，处理异步操作中的异常是一项常见挑战。本文将通过一个案例分析，解释为什么try...catch语句有时无法捕获异步函数中的异常，并提供有效的解决方案。

问题描述：

以下代码片段中，refreshdata函数包含一个try...catch块，旨在捕获refreshtoken函数可能抛出的错误。然而，即使refreshtoken函数出错，catch块也未执行。

<code class="javascript">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);
    }
  }
};</code>

登录后复制

问题根源：

问题在于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进行处理。

<code class="javascript">const request = async (url, method, data) => {
    if (isrefreshtoken) return;
    // 判断token超时，刷新token
    if (store.getters.expirestime && new Date().getTime() >= store.getters.expirestime) {
        await refreshdata();
        return;
    }
    // ...其他代码...
};</code>

登录后复制

方法二：使用.then()和.catch()处理refreshdata的结果

保留new Promise结构，但在refreshdata函数执行完成后，使用.then()和.catch()方法分别处理成功和失败的情况。这种方法更清晰地处理异步操作的结果。

<code class="javascript">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;
        }
        // ...其他代码...
    });
};</code>

登录后复制

重要说明： 这两种方法都是异步操作。即使使用了await，它只是异步代码的同步化写法，并非真正的同步代码。选择哪种方法取决于代码的整体结构和个人偏好。方法二更符合Promise的规范，更易于理解和维护。

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