Vue3中try的finally子句提前执行问题求助

你的代码逻辑本身没问题，finally会在try/catch里的异步操作完成后才执行，之所以出现提前执行的情况，大概率是httpService.getData()没有正确返回Promise，或者内部未等待异步请求完成。

排查与修复步骤 #

• 检查httpService.getData()的实现
  确保它确实返回一个Promise，且内部正确等待异步请求完成。比如基于axios或fetch的正确写法：

  // axios示例
  getData() {
    return axios.get('/api/data'); // 必须返回请求的Promise
  }
  
  // fetch示例
  getData() {
    return fetch('/api/data').then(res => res.json());
  }
  

  如果httpService.getData()中有异步操作但未返回Promise、或未等待异步流程结束，会导致await直接跳过，try块提前执行完毕，finally也就跟着提前触发。

• 验证initializeAllData的await逻辑
  可以在initializeAllData中添加日志，确认异步请求的执行顺序：

  async function initializeAllData() {
    console.log('开始请求数据');
    await httpService.getData();
    console.log('请求完成');
  }
  

  若日志按顺序输出，说明请求确实完成；若请求完成提前出现，就证明httpService.getData()的异步逻辑有问题。

• 用模拟请求测试逻辑
  把httpService.getData()替换为模拟异步请求，验证finally的执行时机：

  // 模拟2秒后完成的异步请求
  httpService.getData = () => new Promise(resolve => setTimeout(resolve, 2000));
  

  此时运行代码，isPageReady.value会在2秒后才变为true，说明原问题出在真实的httpService.getData()实现上。

修正后的完整代码示例 #

async function initializeAllData() {
  // 确保httpService.getData()返回正确的Promise
  await httpService.getData();
}

async function getData() {
  try {
    await initializeAllData();
    loadError.value = false;
  } catch (e) {
    console.error(`初始化数据时出错: ${e}`);
    loadError.value = true;
  } finally {
    // 现在会在请求完成后执行
    isPageReady.value = true;
  }
}

await getData();

内容的提问来源于stack exchange，提问作者amm