如何将fetch获取的JSON数据存入变量而非仅返回Promise？

这个问题其实是异步编程里的常见误区——你得搞懂fetch返回的是Promise，不是直接的JSON数据，所以你的jsondata变量存的是整个Promise对象，而不是解析后的结果。

你在第二个then里的console.log(json)能看到数据，是因为这个回调是在Promise成功resolved（也就是服务器返回数据并完成JSON解析）后才执行的；但外部的console.log(jsondata)是同步执行的，这时候Promise还在等待服务器响应，所以打印出来的自然是Promise对象，不是你要的JSON数据。

下面给你几种靠谱的解决方案，按推荐程度排序：

方案1：用Async/Await（最推荐，代码更清晰） #

这是ES2017之后支持的语法，能让异步代码看起来像同步代码，可读性拉满：

async function fetchAndUseData() {
  try {
    // 等待fetch完成，拿到服务器响应对象
    const response = await fetch(url);
    // 等待响应解析成JSON格式
    const jsondata = await response.json();
    
    // 到这里，你可以直接使用jsondata了！
    console.log("拿到的JSON数据：", jsondata);
    // 比如调用其他处理数据的函数
    renderContent(jsondata);
  } catch (err) {
    // 别忘了处理请求失败或解析失败的情况
    console.error("获取数据出错：", err);
  }
}

// 调用这个异步函数
fetchAndUseData();

// 后续处理数据的函数示例
function renderContent(data) {
  // 把数据渲染到页面上
  document.querySelector(".article-title").textContent = data.title;
  document.querySelector(".article-body").innerHTML = data.content;
}

方案2：继续用Then链式调用（传统异步写法） #

如果你不想用async/await，那就把所有需要用到JSON数据的逻辑都放在then的回调里——因为只有在这个回调里，你才能确保数据已经准备好：

fetch(url)
  .then(response => {
    // 先检查响应是否成功（比如HTTP状态码200-299）
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    return response.json();
  })
  .then(json => {
    // 这里是数据准备好的地方，所有操作都放在这里
    console.log(json);
    // 示例：使用数据里的具体属性
    console.log("用户ID：", json.user.id);
    // 更新页面元素
    document.getElementById("user-name").textContent = json.user.name;
  })
  .catch(error => {
    // 捕获整个请求链路上的所有错误
    console.error("获取数据失败：", error);
  });

方案3：存到全局变量（不推荐，但应急可用） #

如果你非要把数据存到一个变量里供后续使用，只能先声明全局变量，再在then里赋值，但要注意：后续使用这个变量的时候，必须确保数据已经加载完成，否则会拿到undefined：

// 声明全局变量
let globalJsonData;

fetch(url)
  .then(response => response.json())
  .then(json => {
    globalJsonData = json;
    // 赋值完成后再调用后续逻辑，避免拿到undefined
    processGlobalData();
  })
  .catch(err => console.error(err));

function processGlobalData() {
  if (globalJsonData) {
    console.log("使用全局变量的数据：", globalJsonData);
  } else {
    console.log("数据还没加载完成哦");
  }
}

核心总结：异步操作的结果不能同步获取，必须等待异步完成后再处理数据——要么用await等待Promise完成，要么在then回调里处理所有和数据相关的逻辑。

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