Vue3连续API调用问题：需等待两次请求完成后再渲染页面

你的代码核心问题是混合使用await与.then导致异步流程失控：第一个API请求完成后，函数没有等待第二个API请求结束就继续执行，此时resultList.value还未被赋值，页面提前渲染就会抛出JS错误。

修正后的代码 #

async function getResults(OrderNum: string): Promise<void> {
  try {
    // 等待第一个API请求完成，获取筛选参数
    const response1 = await api.get(`/getFilters`);
    const resFilter = response1;

    // 以第一个API结果为参数，等待第二个API请求完成
    const response2 = await api.post(`/getResults/${OrderNum}`, resFilter);
    
    // 所有请求完成后，再赋值给响应式变量
    resultList.value = response2.sort(
      (a: any, b: any) => new Date(b.created) - new Date(a.created)
    );
  } catch (err) {
    console.log("inside getResults catch - no records !!" + err);
  }
}

关键说明 #

1. 统一使用await处理异步请求，确保第一个API返回结果后才发起第二个API请求，且等待其完成后再执行后续逻辑。
2. 只有当两次API请求都完成并处理好数据后，才给resultList.value赋值，页面渲染时数据已经准备就绪，不会因数据缺失报错。
3. 额外建议：如果模板中依赖resultList渲染内容，可以添加v-if="resultList"或v-if="resultList.length"的判断，在数据未就绪时隐藏对应渲染区域，进一步避免潜在错误。

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