如何在fetch请求的.then()中更新全局变量并外部访问结果？

你遇到的问题核心是JavaScript的异步执行顺序：fetch是异步操作，会在后台发送请求，主线程不会等待它完成，会直接往下执行console.log(test)——这时候请求还没结束，test还没被赋值，所以输出undefined。而.then()里的代码是请求成功后才会触发的回调，所以在里面打印result能拿到正确值。

解决方案1：把依赖结果的逻辑放到.then()回调里 #

所有需要用到test的代码，都要等请求完成后再执行，直接写在.then()里就行：

let test

fetch("[request URI]", requestOptions)
  .then(response => response.text())
  .then(result => { 
    test = result;
    console.log(test); // 这里能正常输出结果
    // 所有需要使用test的逻辑都写在这里
  })
  .catch(error => console.log('error', error));

解决方案2：用async/await语法（更直观的异步写法） #

async/await是Promise的语法糖，能让异步代码看起来像同步代码一样：

async function fetchData() {
  try {
    let test;
    // 等待fetch请求完成
    const response = await fetch("[request URI]", requestOptions);
    // 等待响应体解析完成
    test = await response.text();
    console.log(test); // 这里能正常输出结果
    // 后续需要用test的逻辑都可以写在这里
  } catch (error) {
    console.log('error', error);
  }
}

// 调用异步函数
fetchData();

注意事项 #

别尝试用强制阻塞主线程的方式去“等”异步结果，这会导致页面卡死。异步代码的核心逻辑就是等结果就绪后再执行后续操作，要么用.then()链式回调，要么用async/await，这两种是JavaScript处理异步的标准方式。

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