如何将JavaScript中fetch请求的数据保存到函数外部变量？

嘿，我明白你现在的困惑啦——异步操作确实容易让刚接触JavaScript的小伙伴摸不着头脑😉。你现在的问题核心是fetch是异步操作，当你在函数外部尝试访问变量时，fetch的回调逻辑还没执行完，所以拿不到预期的值。下面给你几种实用的解决方案：

方案1：声明全局变量并在异步回调中赋值 #

先在全局作用域声明一个变量，然后在fetch的then回调里给它赋值。但要注意：必须等异步操作完成后再去访问这个变量！

// 在全局作用域声明变量
let globalQuote = '';

function generateNewQuote() {
  fetch('https://api.whatdoestrumpthink.com/api/v1/quotes/random')
    .then(response => response.json())
    .then(data => {
      globalQuote = data.message;
      console.log('回调内的引用：', globalQuote); // 这里能拿到正确值
      // 把需要使用该变量的逻辑放在这里调用，确保值已更新
      useGlobalQuote();
    });
}

// 专门处理全局变量的函数
function useGlobalQuote() {
  console.log('全局访问到的引用：', globalQuote);
}

// ❌ 错误示例：直接在这里调用console.log(globalQuote)会输出空字符串，因为fetch还没完成

方案2：用async/await简化异步逻辑 #

async/await能让异步代码看起来更像同步代码，逻辑更直观，同时别忘了用try/catch处理请求失败的情况：

let globalQuote = '';

async function generateNewQuote() {
  try {
    // 等待fetch请求完成
    const response = await fetch('https://api.whatdoestrumpthink.com/api/v1/quotes/random');
    // 等待JSON解析完成
    const data = await response.json();
    globalQuote = data.message;
    console.log('获取到的引用：', globalQuote);
    // 调用使用变量的逻辑
    useGlobalQuote();
  } catch (error) {
    console.error('请求出错啦：', error);
  }
}

function useGlobalQuote() {
  console.log('全局访问到的引用：', globalQuote);
}

小建议：尽量减少全局变量的使用 #

全局变量容易引发命名冲突、难以维护，推荐用一个对象来封装状态，比直接暴露全局变量更安全：

// 用对象封装状态，避免污染全局作用域
const quoteStore = {
  currentQuote: ''
};

async function generateNewQuote() {
  try {
    const response = await fetch('https://api.whatdoestrumpthink.com/api/v1/quotes/random');
    const data = await response.json();
    quoteStore.currentQuote = data.message;
    useQuote();
  } catch (error) {
    console.error('请求出错：', error);
  }
}

function useQuote() {
  console.log('访问到的引用：', quoteStore.currentQuote);
}

核心要点记住：异步操作不会阻塞代码执行，所以必须确保在异步回调（then或await之后）完成后，再去访问或使用获取到的数据哦！

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