가져 오기에서 변수 할당 약속 약속

Question

배열 인 두 개의 파일이 있는데 가져 오기에서로드하려고합니다. 가져 오기 내가이 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

요령에 응답을 확인하려면이 방법이 유용 할 것입니다. 왜냐하면 콘솔에서 실행되는 모든 것이 기본적으로 비동기 함수 (단순한 추측)로 래핑되기 때문에 비동기 함수없이 기다릴 수 있기 때문입니다.

만 해당 콘솔에서 작동 :

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