Me dan un código con 3 partes que no se deben cambiar:
1. una llamada a la función getData y luego imprime la salida.
getData().then(console.log);2. La firma de la función:
async getData(): Promise<string[]>3. función getDataFromUrl
function getDataFromUrl(url: string, callback: any) { fetch(URL) .then((content: any) => content.json()) .then((data) => callback(data)); }Esta es mi implementación para la función getData:
async getData(): Promise<string[]> { return await new Promise<any>(function(resolve, reject) { resolve(getDataFromUrl(myUrl, ((data: string[]): string[]=> { return data }))) }); }El problema es que el código después de fetch se ejecuta después de
getData().then(console.log);
entonces console.log imprime: indefinido
¿Qué necesito cambiar en la función getData?
Gracias
En lugar de resolver la función getDataFromUrl , debe resolver el valor que expone la función de devolución de llamada.
getData(): Promise<string[]> { return new Promise<string[]>(function(resolve, reject) { getDataFromUrl(myUrl, (data: string[]): string[] => { resolve(data) }) }); } Es lamentable que no pueda cambiar nada sobre las otras funciones, porque devolver la promesa creada por fetch en su función getDataFromUrl mejoraría mucho el código, como demuestra Quentin.
getDataFromUrl no tiene un valor de retorno, por lo que devuelve undefined .
Entonces, pasa undefined para resolve (lo que resuelve su otra promesa) y luego, más tarde , se resuelve la promesa creada por getDataFromUrl (o más bien fetch ).
Simplemente devuelva la promesa de fetch .
function getDataFromUrl(url: string, callback: any) { return fetch(URL) .then((content: any) => content.json()); } Y use esa promesa en lugar de crear una nueva en getData (que no necesita usar await porque eso solo resolverá la promesa que inmediatamente será envuelta en una nueva promesa por async .
getData(): Promise<string[]> { return getDataFromUrl(myUrl); }function getDataFromUrl(url, f) { // call fetch (returns promise) but we can use then as well. // note our callback: f where we pass the data to the callback. fetch(url).then((content) => content.json()).then(data => f(data)); } // edit: note we don't need this be async anymore... async function getData() { // create a promise... return new Promise((resolve, reject) => { // we call with callback arrow and resolve data here getDataFromUrl('https://randomuser.me/api/', (data) => resolve(data)); }) } // we print the data once the getData is done fetching // you can also use reject to handle anything that goes wrong in above. getData().then(data => console.log(data));Recursos utilizados: