How to FETCH data from an API using JavaScript ↩️
Bro Code Bro Code
1.85M subscribers
72,999 views
0

 Published On Dec 28, 2023

#javascript #utorial #course

00:00:00 fetch
00:06:29 async/await
00:08:55 project

// fetch = Function used for making HTTP requests to fetch resources.
// (JSON style data, images, files)
// Simplifies asynchronous data fetching in JavaScript and
// used for interacting with APIs to retrieve and send
// data asynchronously over the web.
// fetch(url, {options})

async function fetchData(){

try{

const pokemonName = document.getElementById("pokemonName").value.toLowerCase();
const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);

if(!response.ok){
throw new Error("Could not fetch resource");
}

const data = await response.json();
const pokemonSprite = data.sprites.front_default;
const imgElement = document.getElementById("pokemonSprite");

imgElement.src = pokemonSprite;
imgElement.style.display = "block";
}
catch(error){
console.error(error);
}
}

show more

Share/Embed