Variable aus Fetch Returning zuweisen Promise

Question

Ich habe zwei Dateien, die Arrays sind, und ich möchte sie von einem Abruf laden. Ich habe eine Asynchron-Funktion, die die Dateien holen:

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

Hier ist dann, wo ich die Variablen auf die Rückkehr fo diese zuweisen holen:

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

Aber damit alles, was ich bekommen ist: from google chrome console

Wie kann ich tatsächlich den Wert erhalten?

Answer 1

Das Ergebnis von getData ist immer eine Promise, die zu Ihren Daten aufgelöst wird. Um die Werte zuzugreifen, können Sie async/await verwenden:

(async() => { 

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

    // use them here 

})(); 

Alternativ können Sie Promise.all verwenden zu warten beide Versprechen zu lösen, und dann Zugriff auf die empfangenen Daten:

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

Dies funktioniert für Sie, wenn Sie nur die Antwort in yo überprüfen möchten Ihre Google Chrome-Konsole, weil Sie in der Konsole ohne eine Async-Funktion warten können, was wahrscheinlich daran liegen könnte, dass alles, was in der Konsole ausgeführt wird, standardmäßig in eine asynchrone Funktion eingebettet ist (nur eine Spekulation).

funktioniert nur in der Konsole:

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

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

Aber wenn Sie diese Arbeit in einer Anwendung erhalten möchten, denken Sie daran, dass Sie immer ein erwarten innerhalb async

wickeln müssen UM ES IN EINER ANWENDUNG ZU ARBEITEN:

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") 
}