返回 Promise Pending 及其已满，但不返回 json [重复]答案

【问题标题】：return Promise Pending, and its fullfilled, but not returning the json [duplicate]返回 Promise Pending 及其已满，但不返回 json [重复]
【发布时间】：2021-03-03 01:01:21
【问题描述】：

我正在使用 fetch 和 aync 和 await 调用本地 json 文件，但是当我调用它时，我在控制台中看到的只是 Promise 待处理，其中显示状态为已完成，而不是 json 数据。

代码是

$(document).ready(() => {
    const jData = ReturnJSONData();
    
    console.log(jData);
});


async function ReturnJSONData() {
    const data = await fetch("../TreeListData.json");
    const ds = await data.json();
    return ds;
}

在异步函数中，返回的 ds 中包含 json

【问题讨论】：

标签： javascript jquery async-await

【解决方案1】：

async 函数总是返回承诺。如果您需要与该 Promise 中的值进行交互，请在该 Promise 上调用 .then：

$(document).ready(() => {
    const promise = ReturnJSONData();
    promise.then(jData => {
      console.log(jData);
    });
});

或将您的代码放入 async 函数和 await 承诺中。

$(document).ready(async () => {
    const jData = await ReturnJSONData();
    console.log(jData);
});

【讨论】：

【解决方案2】：

您对fetch 的调用是异步的，这意味着您需要等待它。

$(document).ready(async () => {
    const jData = await ReturnJSONData();
    
    console.log(jData);
});


async function ReturnJSONData() {
    const data = await fetch("../TreeListData.json");
    const ds = await data.json();
    return ds;
}

使用虚拟异步调用演示此工作：

$(document).ready( async ()=>{
  await dummyPromise();
  console.log("done")
})

const dummyPromise = async () => new Promise(resolve => setTimeout(resolve,2000))

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：