JavaScript中fetch异步请求返回值无法在函数外部调用问题求解

fetch是异步非阻塞API，你调用sendIso3Info函数时，fetch请求发出后不会等后端返回结果，会继续向下执行后续代码，当函数执行到return temp时，fetch的.then回调还没有被触发，temp还没有被赋值，所以返回值永远是undefined。即便使用全局变量存储结果，也存在时序问题：你读取全局变量的时机早于fetch返回后赋值的时机，因此也拿不到值。

推荐使用ES7的async/await语法改写异步逻辑，处理fetch返回结果：

步骤1：改写tools_4.js中的sendIso3Info函数 #

async function sendIso3Info(inCurrency) {
  const iso3Info = {
    text: inCurrency
  }
  // 等待fetch请求完成，拿到响应对象
  const response = await fetch(`/processIso3Info/${JSON.stringify(iso3Info)}`)
  // 等待读取响应的文本内容
  const result = await response.text()
  // 如果你还需要调用原来的data_function处理数据，可以在这里调用
  data_function(result)
  // 直接返回接口结果
  return result
}

// 可以保留原来的工具函数
function data_function(data) {
  console.log('ich bin in der neuen Funkion!');
  alert(data);
  console.log('处理后的数据：', data);
}

步骤2：改写前端模板中的调用逻辑 #

async函数返回的是Promise对象，必须通过await或者.then来获取最终返回值：

<script> 
// 用自执行异步函数包裹，才能使用await语法
(async () => {
  const iso3Text = await sendIso3Info('Euro');
  // 所有需要使用iso3Text的逻辑都要写在这个作用域内
  console.log('函数外部拿到的返回值：', iso3Text);
  // 比如把值渲染到页面上
  document.getElementById('mylog').textContent = iso3Text;
})()
</script>

如果你不想用async/await语法，也可以用.then的方式处理调用：

sendIso3Info('Euro').then(iso3Text => {
  console.log('拿到的返回值：', iso3Text)
  // 后续使用返回值的逻辑都写在这里
})

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