标签导航:

javascript异步代码中try...catch语句失效的原因是什么?

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

本文分析一段JavaScript代码,该代码试图在异步操作中使用try...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函数中使用了new Promise(async (resolve, reject) => { ... })这种非最佳实践。async函数内部的await会暂停Promise的执行,但不会将await内部函数抛出的异常传递给Promise的reject函数。因此,refreshdata函数中的try...catch虽然能捕获refreshtoken函数的异常,但该异常不会被request函数捕获。

解决方案:

有两种方法解决此问题:

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

将request函数改为async函数,直接使用await等待refreshdata函数的执行。这样,refreshdata函数中抛出的异常会自动向上冒泡,最终被request函数的调用者捕获(或导致程序崩溃)。

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

方法二:在request函数中正确处理refreshdata的Promise

保持request函数返回Promise对象,但在refreshdata函数执行完成后,正确调用resolve或reject函数处理结果和错误。

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

重要说明: 两种方法都处理了异步操作,即使使用了await,代码仍然是异步的,而非同步的。 选择哪种方法取决于代码的整体架构和需求。 方法一更简洁,但可能需要调整调用request函数的方式。方法二更灵活,但代码略微复杂。