React 从 http 获取 json 数据答案

【问题标题】：React get json data from httpReact 从 http 获取 json 数据
【发布时间】：2020-03-03 14:12:22
【问题描述】：

我是反应技术的新手。

如何从 http 请求中获取 json 数据？

正如您在上看到的那样

我可以从这个函数里面得到console.log(dataExt);的值，但我无法从这个函数之外获取console.log(dataExt); 的值。

我想念什么？

我确实使用了return dataExt;，为什么我什么也没得到？

我修改了我的函数：

async function getDataExt()
{   
  try {
    let response = await fetch('https://xxxx');
    let dataExt = await response.json();
    console.log(dataExt);
    return dataExt;
   } catch(error) {
    console.error(error);
  }
}

但我仍然无法获得价值

【问题讨论】：

你能让你的函数异步并在调用它之前添加等待吗？
请考虑通过片段或代码示例而不是图片添加代码。谢谢
return dataExt 返回一个承诺，它不是同步的

标签： json reactjs

【解决方案1】：

fetch 调用是异步的并返回一个Promise，这就是为什么你需要调用then 来获得结果。就目前而言，第 62 行不会等待 getDataExt() 中的 fetch 完成，然后再运行 console.log。您需要将getDataExt 视为异步函数，并执行async/await 或.then()。

【讨论】：

i didasync function getDataExt() { try { let response = await fetch('xxxx');让 dataExt = 等待 response.json();控制台.log(dataExt);返回数据分机； } 捕捉（错误） { 控制台.错误（错误）； } }

【解决方案2】：

是因为异步的原因，即“return”在获取请求中的值时执行，需要时间。假设数据返回需要 1 秒，而变量打印需要 0.1 秒，这意味着它首先打印然后分配值。现在，一个可能的解决方案是创建一个“state”来保存该数据或合作伙伴所说的，创建函数getDataExt作为asynchronous function .

【讨论】：