Quiero mostrar una lista de los más vendidos del New York Times obteniendo los datos a través de una API. Sin embargo, los enlaces de las portadas deben obtenerse de la API de Google Books, ya que la API del NYT no los proporciona.
Por lo tanto, quiero mapear una lista con los datos obtenidos. En el mismo paso en el que obtengo los datos de la API del NYT, también se obtendrán los datos de la API de Google Books. Por lo tanto, uso la palabra clave await para dejar que el código espere a que finalice la segunda búsqueda.
Pero, desafortunadamente, la lista no se actualiza aunque se cumplió la promesa y se obtuvieron los datos. La variable bestsellerlist es una matriz de promesas cumplidas, pero ninguna "matriz real" a la que pueda acceder.
Supongo que debería ser posible dividir la búsqueda y crear la lista a partir de dos matrices: una con los datos de la API del NYT y otra con los datos de la API de Google Books. Sin embargo, me pregunto cómo puedo arreglar el código, para poder obtener todos los datos y crear la lista en un solo paso .
const fetchLinkCover = async (isbn) => { const res = await fetch(googleApi(isbn)); const json = await res.json(); return json.items[0].volumeInfo.imageLinks.smallThumbnail; }; useEffect(() => { fetch(nytimesApi) .then((res) => res.json()) .then((json) => { const fetchedBookList = json.results.books; setBestsellerList( fetchedBookList.map(async (item) => { const linkCover = await fetchLinkCover(item.isbns[0].isbn13); return { title: item.title, authors: item.author, ranking: item.rank, cover: linkCover, }; }) ); }); }, []); console.log(bestsellerList);.map no hace nada especial con las promesas. Si devuelve una promesa de su función de mapa (y las funciones asíncronas siempre devuelven promesas), entonces .map creará una matriz de promesas. No esperará a que esas promesas se resuelvan.
Para esperar una serie de promesas, puede usar Promise.all para combinarlas en una sola promesa. Luego, llama a .then con esa promesa, o coloca su código en una función async y lo await .
Con .then :
fetch(nytimesApi) .then((res) => res.json()) .then((json) => { const fetchedBookList = json.results.books; const promises = fetchedBookList.map(async (item) => { const linkCover = await fetchLinkCover(item.isbns[0].isbn13); return { title: item.title, authors: item.author, ranking: item.rank, cover: linkCover, }; }); return Promise.all(promises); }) .then((books) => { setBestsellerList(books); }); O con async / await :
useEffect(() => { const fetchBooks = async () => { const res = await fetch(nytimesApi); const json = await res.json(); const fetchedBookList = json.results.books; const promises = fetchedBookList.map(async (item) => { const linkCover = await fetchLinkCover(item.isbns[0].isbn13); return { title: item.title, authors: item.author, ranking: item.rank, cover: linkCover, }; }); const books = await Promise.all(promises); setBestsellerList(books); }; fetchBooks(); }, []);