Para hacer que mi código sea más limpio, quiero usar datos de API obtenidos en algunas funciones diferentes, en lugar de una grande. Aunque me las arreglé para referirme a esos datos en otras funciones, el problema es que la API en una búsqueda arroja resultados aleatorios diferentes cada vez que se llama. Entonces, la salida de userData() no es igual a la de userData2(), aunque mi intención es diferente y me gustaría que el contenido de la variable de resultado sea el mismo entre las funciones.
const getData = () => fetch("https://opentdb.com/api.php?amount=10").then((response) => response.json() ); const useData = async () => { const result = await getData(); console.log(result); }; const useData2 = async () => { const result = await getData(); console.log(result); };Su función getData() devuelve una promesa. Un hecho divertido acerca de las promesas es que, si bien solo se pueden resolver una vez, se puede acceder a ese valor resuelto y usarlo tantas veces como desee.
const dataPromise = getData(); const useData = async () => { const result = await dataPromise; console.log(result); }; const useData2 = async () => { const result = await dataPromise; console.log(result); }; El uso de await resuelve el valor prometido, el equivalente de...
dataPromise.then((result) => { console.log(result); }); // or `dataPromise.then(console.log)` if you like brevityMe gusta señalar esto sobre fetch-api ... siempre debe verificar la propiedad Response.ok
const getData = async () => { const res = await fetch("https://opentdb.com/api.php?amount=10"); if (!res.ok) { throw new Error(`${res.status}: ${await res.text()}`); } return res.json(); };