如何实现checkVals函数等待异步getData执行完成后再运行？

问题核心 #

你的getData是异步函数（带async关键字），它返回的是Promise对象，直接调用后代码会继续执行checkVals，不会等待异步操作（比如fetch请求）完成，导致quData还未赋值就被打印。另外直接修改全局变量的写法易引发时序问题，更推荐通过异步函数返回值传递数据。

解决方案1：使用async/await（最直观） #

把调用逻辑放在async函数里，用await等待getData执行完成，再调用checkVals。同时优化getData，不再依赖全局变量：

优化后的带fetch的getData

async function getData() {
  const res = await fetch("http://localhost:9000/testAPI/api/upload", {
    method: "GET",
    headers: { "content-type": "application/JSON" },
  });
  const data = await res.json();
  // 直接返回处理后的数据，无需修改全局变量
  return {
    Title: data.Title,
    Question: data.Question,
    DoC: data.DoC,
  };
}

优化后的不带fetch的getData

async function getData() {
  const data = {
    Title: "Title",
    Question: "Question",
    DoC: "DoC"
  };
  return {
    Title: data.Title,
    Question: data.Question,
    DoC: data.DoC,
  };
}

修改checkVals（接收参数，摆脱全局变量依赖）

const checkVals = (quData) => {
  console.log(quData);
};

调用逻辑

// 用async函数包裹初始化流程
async function init() {
  const quData = await getData();
  checkVals(quData);
}

// 执行初始化
init();

解决方案2：使用Promise的.then()链式调用 #

如果不想用async/await，可直接通过Promise链式调用，在getData的异步操作完成后执行checkVals：

调用代码

getData().then(quData => {
  checkVals(quData);
});

（getData和checkVals使用上面优化后的版本即可）

不推荐方案：依赖全局变量（仅作参考） #

若你坚持保留全局变量quData，可在getData的Promise完成后再调用checkVals，但这种写法易引发变量污染和时序问题：

// 用then链式调用
getData().then(() => {
  checkVals();
});

// 或用async/await
async function init() {
  await getData();
  checkVals();
}
init();

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