Estoy comenzando y una de las primeras cosas que intento por mi cuenta es cómo agregar múltiples fuentes a esta promesa:
const getTodos = async () =>{ const response = await fetch('todos/resource.json'); if(response.status !== 200){ throw new Error('Cannot fetch data'); } const data = await response.json(); return data; }; getTodos() .then(data => console.log ('Resolved: ', data)) .catch(err => console.log ('Rejected', err.message);Intenté crear diferentes variables y usar .then after para imprimirlas, pero eso no funcionó.
const getTodos = async () =>{ const response = await fetch('todos/resource1.json'); if(response.status !== 200){ throw new Error('Cannot fetch data'); // Error from the source } const data = await response.json(); return data; const response2 = await fetch('todos/resource2.json'); if(response2.status !== 200){ throw new Error('Cannot fetch data'); // Error from the source } const data2 = await response2.json(); return data2; }; getTodos() .then(data => console.log ('Resolved: ', data)) .then(data2 => console.log ('Resolved: ', data2)) .catch(err => console.log ('Rejected', err.message)) // Error for json file ;¿algun consejo?
Edit1:
Básicamente estoy tratando de traducir esto
const getTodos = (resource) => { return new Promise((resolve, reject) =>{ const request = new XMLHttpRequest(); request.addEventListener('readystatechange', () =>{ if(request.readyState === 4 && request.status === 200){ const data = JSON.parse(request.responseText); resolve(data); } else if(request.readyState === 4){ reject('Error getting resource'); } }); request.open('GET', resource); request.send(); }) } // Then - To get data successfully, Catch - to catch error getTodos('todos/food.json').then(data =>{ console.log('Promise resolved', data); return getTodos('todos/sports.json') }).then(data =>{ console.log('Promise 2 resolved', data) return getTodos('todos/games.json') }).then(data =>{ console.log('Promise 3 resolved', data) return getTodos('todos/sportss.json') //Error example }).then(data =>{ console.log('Promise 4 resolved', data) }).catch(err => { console.log('Promise Rejected', err) });en espera asincrónica.
Si desea devolver varias cosas de una función, debe devolver una matriz o un objeto. Dos declaraciones de devolución no funcionarán. Tan pronto como se golpea el primer retorno, ya está. La única diferencia en una función asíncrona es que su declaración de devolución única determina el valor de resolución de la promesa. Sin embargo, todavía está limitado a una devolución.
Así que aquí hay un ejemplo que devuelve un objeto:
const getTodos = async () =>{ const response = await fetch('todos/resource1.json'); if(response.status !== 200){ throw new Error('Cannot fetch data'); // Error from the source } const data = await response.json(); const response2 = await fetch('todos/resource2.json'); if(response2.status !== 200){ throw new Error('Cannot fetch data'); // Error from the source } const data2 = await response2.json(); return { data1, data2, } }; // used like: getTodos().then(result => { console.log(result.data1); console.log(result.data2); }); // or with async/await: async someFunction () { const result = await getTodos(); console.log(result.data1); console.log(result.data2); }Del comentario anterior...
"El OP podría echar un vistazo a
Promise.allyPromise.allSettledo a ambos"
async function fetchTodoItems(resourceList) { return Promise.all( resourceList .map(url => fetch(url) .then(response => response.json()) ) ); } (async () => { try { const todoItems = await fetchTodoItems([ 'https://jsonplaceholder.typicode.com/todos/1', 'https://jsonplaceholder.typicode.com/todos/11', 'https://jsonplaceholder.typicode.com/todos/21', 'https://jsonplaceholder.typicode.com/todos/31', 'https://jsonplaceholder.typicode.com/todos/41', 'https://jsonplaceholder.typicode.com/todos/51', 'https://jsonplaceholder.typicode.com/todos/61', ]); console.log({ todoItems }); } catch(exception) { console.log('failed to fatch data with ...', { exception }); } })(); .as-console-wrapper { min-height: 100%!important; top: 0; } Promise.all falla rápidamente y el manejo de errores/excepciones se puede realizar en un lugar dentro del código...
async function fetchTodoItems(resourceList) { return Promise.all( resourceList .map(url => new Promise((_, reject) => reject('invalid api call')) // fetch(url) // .then(response => response.json()) ) ); } (async () => { try { const todoItems = await fetchTodoItems([ 'https://jsonplaceholder.typicode.com/todos/1', ]); console.log({ todoItems }); } catch(exception) { console.log('failed to fatch data with ...', { exception }); } })(); .as-console-wrapper { min-height: 100%!important; top: 0; }