如何将fetch返回的access_token设为全局变量以解决未定义错误？

你在控制台遇到错误：Uncaught (in promise) ReferenceError: access_token is not defined，原因是该变量并非全局作用域变量，而你需要用fetch返回的它来请求其他数据。以下是几种将其设为全局变量的可行方法：

方法一：在全局作用域提前声明变量 #

在所有函数、代码块之外的最外层先声明变量，之后在fetch回调中赋值：

// 全局作用域声明
let access_token;

fetch('你的Token接口地址')
  .then(res => res.json())
  .then(data => {
    // 给全局变量赋值
    access_token = data.access_token;
  })
  .catch(err => console.error('请求Token失败：', err));

后续代码即可直接使用access_token变量。

方法二：挂载到window对象（浏览器环境） #

浏览器中window是全局对象，将变量挂载到它上面即可实现全局访问：

fetch('你的Token接口地址')
  .then(res => res.json())
  .then(data => {
    // 挂载到window成为全局变量
    window.access_token = data.access_token;
  })
  .catch(err => console.error('请求Token失败：', err));

之后在任何位置都可以通过window.access_token或直接access_token访问该值。

关键注意点 #

fetch是异步操作，必须确保在使用access_token前它已经被成功赋值。如果后续请求逻辑是同步执行的，可能会拿到undefined，建议把后续请求逻辑放到fetch的then回调中，或者使用async/await来保证顺序：

async function fetchTokenAndOtherData() {
  // 先获取Token
  const tokenResponse = await fetch('你的Token接口地址');
  const tokenData = await tokenResponse.json();
  window.access_token = tokenData.access_token;

  // 再用Token请求其他数据
  const dataResponse = await fetch('其他数据接口地址', {
    headers: {
      'Authorization': `Bearer ${access_token}`
    }
  });
  const resultData = await dataResponse.json();
  // 处理返回的其他数据
}

// 执行函数
fetchTokenAndOtherData();

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