如何将Fetch获取的数据存入变量？解决赋值后返回undefined问题

嘿，我来帮你搞定这个问题～你的代码之所以拿不到预期的[1, 2, 3]，主要是踩了两个常见的异步编程坑：

问题根源 #

• 异步执行顺序的坑：fetch是异步操作，它不会阻塞后续代码的执行。你写的console.log(data)会在fetch请求还没完成、then里的回调函数还没触发的时候就先跑了，这时候外部的data还是初始的undefined。
• 变量作用域的坑：你在第二个then里用var data = output重新声明了一个局部变量，这相当于在回调函数内部新建了一个和外部同名的变量，根本没修改到你最开始定义的那个全局data。

解决方案 #

方案1：把使用data的逻辑放到then回调里 #

直接把需要用到data的代码（比如console.log）放在then回调内部，确保等请求完成后再执行：

var data; 
fetch('./js/samplejson.json')
  .then((res) => res.json())
  .then(output => {
    data = output; // 去掉var，直接给外部变量赋值
    console.log(data); // 这里就能正常输出[1,2,3]了
    // 所有依赖data的业务逻辑都可以写在这里
  })

方案2：用async/await简化异步代码（更推荐） #

async/await可以把异步代码写成类似同步的样子，可读性更强，也更符合直觉：

async function fetchData() {
  try {
    const res = await fetch('./js/samplejson.json');
    const data = await res.json();
    console.log(data); // 这里能拿到预期的结果
    // 后续处理data的逻辑都可以放在这里
  } catch (err) {
    console.error('请求出错啦：', err);
  }
}
fetchData();

额外提醒 #

如果你的业务逻辑必须依赖data的值才能继续，千万不要在异步操作外面直接使用它——必须等异步操作完成后再处理，要么放在then回调里，要么用async/await等待结果返回。

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