异步代码中fetch返回Promise无法获取JSON响应的问题求助

你的代码问题核心在于异步代码的执行顺序：同步代码会优先运行，当你执行console.log时，Fetch的异步请求还未完成，自然拿不到结果。下面逐个修正你的写法，并给出直接获取JSON文本的方案：

1. 修正.then()链式调用写法 #

所有依赖异步结果的逻辑必须放在.then()的回调内部，因为回调会在请求完成后才执行：

let x;

fetch("https://www.googleapis.com/books/v1/volumes?q=hello&maxResults=1")
  .then((response) => response.json())
  .then((data) => {
    x = data;
    // 所有需要用x的操作都要写在这里
    console.log("THIS IS X...");
    console.log(x); // 此处会正确输出数据
  });

// 这里的代码会在请求完成前执行，所以x仍是undefined

2. 修正async/await写法 #

确保await语句和依赖结果的代码都在async函数内部，await会暂停函数执行直到请求完成：

async function fetchBooks() {
  const response = await fetch("https://www.googleapis.com/books/v1/volumes?q=hello&maxResults=1",
    { headers: { Accept: 'application/json' } });
  let data = await response.json();

  console.log("THIS IS DATA...");
  console.log(data); // 此处会正确输出解析后的JSON对象
}

// 调用异步函数触发请求
fetchBooks();

3. 直接获取JSON格式的文本字符串 #

如果不需要将JSON解析为JS对象，只想拿到原始文本，把response.json()换成response.text()即可：

用.then()实现： #

fetch("https://www.googleapis.com/books/v1/volumes?q=hello&maxResults=1")
  .then((response) => response.text())
  .then((jsonText) => {
    console.log("原始JSON文本：");
    console.log(jsonText); // 直接输出JSON格式的字符串
    // 后续如需解析，可使用JSON.parse(jsonText)
  });

用async/await实现： #

async function fetchJsonText() {
  const response = await fetch("https://www.googleapis.com/books/v1/volumes?q=hello&maxResults=1");
  const jsonText = await response.text();
  console.log("原始JSON文本：");
  console.log(jsonText);
}

fetchJsonText();

关键提醒 #

异步代码的核心规则：不要在异步操作完成前访问结果。所有用到异步返回数据的逻辑，必须放在.then()回调内，或await语句之后的同一async函数中。

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