API에서 데이터 가져오기: async/await

이전 블로그에서 .then 메서드를 사용하여 공개 API에서 데이터를 가져오는 방법에 대해 썼습니다. 이제 async/await 메서드를 사용하여 데이터를 가져올 것입니다.

공개 APIPokeAPI를 사용하여 Pokémon 데이터에 액세스할 수 있습니다.

시작하려면 .js 파일에 다음을 추가하십시오.

const url ='https://pokeapi.co/api/v2/pokemon/1' 

다음으로 비동기 함수를 만들어야 합니다.

async function pokemon (){
    const resp = await fetch (url); //Here, you fetch the url
    const data = await resp.json(); //The data is converted to json
    console.log(data)
};

이제 함수를 호출해야 합니다.

pokemon();

다음과 같이 브라우저 콘솔에서 데이터를 볼 수 있습니다.


이제 선택한 데이터를 브라우저에 표시하려면 id 파일에 class 또는 .html를 만들어야 합니다.

<h1 id="pokemon"></h1>

이제 id를 잡고 textContent 파일의 포켓몬 기능에 .js를 추가할 수 있습니다. 이 예에서는 다음과 같이 포켓몬의 이름을 가져왔습니다.

async function pokemon (){
    const resp = await fetch (url);
    const data = await resp.json();
    document.getElementById("pokemon").textContent = data.name;
};

info();

마지막으로 다음과 같이 포켓몬의 이름이 브라우저에 표시됩니다.


고맙습니다! 이 포스팅이 도움이 되었길 바랍니다 :)