fetchから変数を代入プロミスを返します

Question

私は配列である2つのファイルを持っていますが、それらをフェッチからロードしたいのです。フェッチ私はこのFOリターンに変数を割り当てる

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

そして、ここに

です：私は、ファイルを取得非同期機能を持っている

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

これは、あなたが応答を確認したい場合あなたはコンソールで実行されたすべてがデフォルトで非同期関数でラップされているため（おそらく投機）、非同期関数を使用せずにawaitを使用することができるため、Google Chromeコンソールを使用できます。

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

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

しかし、あなたは、アプリケーションでこの作業を取得したい場合は、あなたが常にが

非同期 内を待つラップする必要があることを忘れないでください：

は、コンソールだけで動作しますアプリケーションで作業するには：

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