Tengo esta prueba que hice solo para verificar una API, pero luego intenté agregar una URL de una segunda búsqueda usando como parámetro un valor obtenido en la primera búsqueda y luego devolví un valor para agregar en la primera. La idea es agregar la URL de la imagen al enlace. gracias de antemano.
function script() { const url = 'https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20' const result = fetch(url) .then( (res)=>{ if(res.ok) { return res.json() } else { console.log("Error!!") } }).then( data => { console.log(data) const main = document.getElementById('main'); main.innerHTML=`<p><a href='${data.next}'>Next</a></p>`; for(let i=0; i<data.results.length;i++){ main.innerHTML=main.innerHTML+`<p><a href=${getImageURL(data.results[i].url)}>${data.results[i].name}</a></p>`; } }) } async function getImageURL(imgUrl) { const resultImg = await fetch(imgUrl) .then( (res)=> { return res.json() }) .then (data => { console.log(data.sprites.other.dream_world.front_default); }) return resultImg.sprites.other.dream_world.front_default; }En general, no mezcle los controladores await / .then con async / .catch . Por lo general, no hay necesidad, y puede hacerte tropezar así.
El problema es que su controlador de cumplimiento (la devolución de llamada .then ) no devuelve nada, por lo que la promesa que crea se cumple con undefined .
Podría devolver data , pero en realidad simplemente no use .then / .catch en absoluto:
async function getImageURL(imgUrl) { const res = await fetch(imgUrl); if (!res.ok) { throw new Error(`HTTP error ${res.status}`); } const resultImg = await res.json(); return resultImg.sprites.other.dream_world.front_default; } [Tenga en cuenta que agregué un cheque de res.ok . Esto es (en mi humilde opinión) una pistola en la API de fetch , no rechaza su promesa sobre errores HTTP (como 404 o 500), solo sobre errores de red . Tienes que comprobar explícitamente los errores de HTTP. (Lo escribí en mi antiguo blog anémico aquí .)]
También hay un problema cuando usas getImageURL :
// Incorrent for (let i = 0; i < data.results.length; i++) { main.innerHTML=main.innerHTML+`<p><a href=${getImageURL(data.results[i].url)}>${data.results[i].name}</a></p>`; } El problema aquí es que getImageURL , como todas las funciones async , devuelve una promesa . Está tratando de usarlo como aquellos que devolvieron el valor de cumplimiento que espera, pero no puede, todavía no tiene ese valor.
En su lugar, debe esperar a que se cumplan las promesas que está creando en ese bucle. Dado que ese ciclo está en código síncrono (no es una función async ), volveríamos a .then / .catch , y dado que queremos esperar a que termine un grupo de cosas que se pueden hacer en paralelo, haríamos eso con Promise.all :
// ... const main = document.getElementById('main'); const html = `<p><a href='${data.next}'>Next</a></p>`; Promise.all(data.results.map(async ({url, name}) => { const realUrl = await getImageURL(url); return `<p><a href=${realUrl}>${name}</a></p>`; })) .then(paragraphs => { html += paragraphs.join(""); main.innerHTML = html; }) .catch(error => { // ...handle/report error... });Por un lado, su
.then (data => { console.log(//... al final de la cadena de promesa devuelve indefinido. Simplemente elimínelo, y si desea console.log , haga console.log(resultImg) en la siguiente declaración/siguiente línea, después de await .
Esta es la versión final que logra mi objetivo. Solo quiero dejar esto en caso de que alguien lo encuentre útil. Gracias por los que contestan!
function script() { const url = 'https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20' const result = fetch(url) .then( (res)=>{ if(res.ok) { return res.json() } else { console.log("Error!!") } }).then( data => { console.log(data) const main = document.getElementById('main'); main.innerHTML=`<p><a href='${data.next}'>Proxima Página</a></p>`; Promise.all(data.results.map(async ({url, name}) => { const realUrl = await getImageURL(url); return `<div><a href=${realUrl}>${name}</a></div>`; })) .then(paragraphs => { main.innerHTML=main.innerHTML+paragraphs; }) .catch(error => { console.log(error); }); }) } async function getImageURL(imgUrl) { const res = await fetch(imgUrl); if(!res.ok) { throw new Error(`HTTP Error ${res.status}`) } const resultImg = await res.json(); return resultImg.sprites.other.dream_world.front_default }