JS中await未按预期工作，异步JavaScript新手求助

我一眼就看出问题出在哪了——你的getIP函数没有返回Promise对象，这就导致await根本没法等待它的异步操作完成！

问题根源 #

fetch本身是返回Promise的，但你的getIP函数只是调用了fetch，却没有把这个Promise返回出去。所以当你在test里用await getIP()的时候，JavaScript会把getIP()当成一个普通的同步函数（因为它默认返回undefined），await等于白写，代码会直接往下走，根本等不到请求完成。

另外，你的getIP函数看起来还没写完，应该还要处理fetch的响应，把IP赋值给input.value对吧？我帮你补全并修复。

修复后的完整代码 #

let input = document.querySelector('#test');
document.querySelector('#btn').addEventListener('click', getIP);
document.querySelector('#btn-2').addEventListener('click', test);

async function test() {
  let value = input.value;
  if (!value) {
    await getIP(); // 现在这里能真正等待异步请求完成了
    value = input.value;
  }
  alert(value); // 现在能拿到正确的IP值了
}

// 修复getIP：返回fetch的Promise链
function getIP() {
  // 注意要return整个fetch的Promise链
  return fetch('https://httpbin.org/ip')
    .then(response => {
      if (!response.ok) {
        throw new Error('请求失败');
      }
      return response.json();
    })
    .then(data => {
      // 把获取到的IP赋值给input
      input.value = data.origin;
    })
    .catch(error => {
      console.error('获取IP出错:', error);
      // 可以在这里给input设置默认值或者提示用户
      input.value = '获取IP失败';
    });
}

关键要点解释 #

• 必须返回Promise：await只能等待Promise对象，所以getIP一定要把fetch的Promise（包括后续的then链）返回出去。
• 处理响应和错误：加上了response.ok的检查和catch块，避免请求失败时代码卡住或者出现未处理的错误。
• 补全请求逻辑：完善了fetch的响应处理，确保获取到IP后能正确赋值给输入框，让test函数后续能拿到更新后的值。

这样修改后，当test函数里检测到input.value为空时，会等待getIP的请求完成、把IP赋值给input后，再执行alert(value)，就能得到符合预期的结果啦！

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