Question

我有两个数组文件，我想从fetch中加载它们。我有一个异步函数来获取文件：

async function getData(file) {
    const data = await fetch(`./assets/resources/${file}.json`);
    return await data.json()
}

然后在这里我将变量分配给此fetch的返回值：

let notes = getData("notes").then(res => res)
let pentagrama = getData("pentagrama").then(res => res)

但是我得到的就是： from google chrome console

我怎样才能真正获得价值？

Answer 1

getData的结果始终是Promise，可以解析为您的数据。要访问这些值，您可以使用async/await：

(async () => {

    let notes = await getData("notes");
    let pentagrama = await getData("pentagrama");

    // use them here

})();

或者，您可以使用Promise.all等待两个承诺解析，然后访问收到的数据：

let notesP = getData("notes");
let pentagramaP = getData("pentagrama");

Promise.all([noteP, pentagramaP]).then(res => {

    let notes = res[0];
    let pentagrama = res[1];

    // use them here

});

Answer 2

ASYNC

AWAIT

如果您只是想检查Google Chrome控制台中的响应，这对您有用，因为在控制台中您可以使用await而不使用异步功能，这可能是因为在控制台中执行的所有内容都包含在异步功能中默认（只是推测）。

仅适用于控制台：

const getData = (file) => (
  fetch(`./assets/resources/${file}.json`).then(data => data.json());
)

let notes = await getData("notes")
let pentagrama = await getData("pentagrama")

但是如果你想在应用程序中使用它，请记住你总是需要在 async

中包含等待

使其在应用程序中工作：

const getData = async (file) => (
  await fetch(`./assets/resources/${file}.json`).then(data => data.json());
)

const wrapperFunc = async () => {  
  let notes = await getData("notes")
  let pentagrama = await getData("pentagrama")
}

从fetch返回Promise中分配变量

2 个答案: