在异步获取功能之外保存JSON文件

如何解决在异步获取功能之外保存JSON文件

为什么console.log(jsonData)函数中的async以我想要的格式返回json对象，而异步函数之外的console.log(jsondata)返回一条消息，消息为Promise { < pending> }。

如何保存获取的JSON文件，以便我可以存储它并在函数外部读取它？

async function returnData() {
    const response = await fetch(data_url)
    if (!response.ok) {
        const message = 'An error has occured!'
        throw new Error(message);
    }
    const jsonData = await response.json();
    console.log(jsonData)
    return jsonData;
}

const jsondata = returnData();
console.log(jsondata)

解决方法

returnData是一个异步函数，因此返回值将是一个承诺。

您可以通过以下方式获取结果值：

(async () => {
  console.log(await returnData())
})()

看看这个答案：How to return values from async functions using async-await from function?

简而言之

您不能在不完全停止浏览器的情况下访问异步块之外的Promise数据。
请阅读下面的解决方法。

但是为什么？

异步代码（或简称为异步）使您能够在不停止脚本执行的情况下运行功能（例如，发出服务器请求）。

这在处理服务器和API时至关重要，因为服务器请求需要时间。
您不想每次发出请求都完全停止浏览器。

这就是为什么存在异步代码的原因，以使您能够在请求挂起时执行其他操作。

console.log给您未完成的承诺的原因是因为它尚未完成执行。

您不能在不完全停止浏览器的情况下访问异步块之外的Promise数据。

结论/解决方法

您最好的选择是创建一个回调函数，异步函数（例如fetch）将在完成执行后“回调”。一个例子是：

fetch(url).then(callBackFunc);

function callBackFunc(data) { // It automatically "feeds" the function with data
 // Do something with data
}

您也可以像以前一样将async函数与await一起使用。
它的作用是暂停脚本执行，但仅在其内部起作用。
然后，您可以从那里调用回调函数：

async function getData() {
  var data = await fetch(url);
  callBackFunc(data);
}

function callBackFunc(data) {
  // Do something with data
}

参考文献

但是认真地看一看。他们将使您更好地了解异步的工作原理，展示其重要性，并解释为什么所有这些都是异步创建的。