在异步获取函数之外保存 JSON 文件答案

【问题标题】：Saving a JSON file outside of a async fetch function在异步获取函数之外保存 JSON 文件
【发布时间】：2021-02-12 13:31:54
【问题描述】：

为什么async函数内的console.log(jsonData)返回我想要的格式的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)

【问题讨论】：

标签： json fetch async.js request-promise

【解决方案1】：

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

可以通过写法得到结果值：

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

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

【讨论】：

【解决方案2】：

总之

如果不完全停止浏览器，您将无法访问异步块之外的 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
}

参考文献

但是说真的，给他们看看。它们将使您更好地了解异步的工作原理，展示它为何如此重要，并解释为什么这一切都被创建了。

【讨论】：