标签导航:

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

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

在JavaScript开发中,妥善处理异步操作的错误至关重要。本文将剖析一段代码,解释其异步函数中try...catch块未能捕获预期错误的原因,并提供相应的解决方案。

代码的核心在于request函数和refreshdata函数的交互。request函数发起网络请求,并在token过期时调用refreshdata函数刷新token。refreshdata函数内部使用try...catch块处理refreshtoken函数可能抛出的错误。然而,即使refreshtoken函数出错,catch块也未执行。

问题代码:

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);
    }
  }
};

问题根源:

问题在于request函数中new Promise的使用方式。Promise构造函数内部使用了async函数,导致await refreshdata()产生的错误不会被Promise的reject函数捕获。await关键字使异步代码看起来像同步代码,但其异步本质不变,错误处理需与Promise机制正确结合。

解决方案:

提供两种解决方案:

方案一:将request函数声明为async函数

直接使用await等待refreshdata的结果,refreshdata中的try...catch块即可正常捕获错误,并通过Promise机制传递到request函数的调用方。

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;
    }
    // ...其他代码
};

方案二:在request函数中使用Promise的then和catch方法

将refreshdata的返回值(一个Promise对象)正确传递给then和catch方法。

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;
        }
        // ...其他代码
    });
};

总结:

虽然使用了await,但这仍然是异步代码,并非同步代码。await只改变了代码书写方式,其异步本质不变。正确的错误处理仍然依赖于Promise机制。 选择方案一通常更简洁易读。