Tengo esta función existente, que funciona bien:
const fetchWrapper = (resource, init) => { console.log('About to fetch...', resource) const p = fetch(resource, init) p.then( (response) => { console.log('The response is:', response) }, (error) => { console.log('The error is:', error) } ) return p } Intento usar async/await siempre que sea posible. Sin embargo, estoy pensando que en realidad no es posible hacerlo. El problema principal es que quiero devolver la promesa devuelta por fetch() , para que la función de llamada pueda await como lo haría normalmente.
Pero también quiero que sucedan cosas adicionales justo antes de llamar a fetch() (esa es la parte fácil) y luego inmediatamente después de una respuesta de la red.
Para hacer eso, adjunto dos devoluciones de llamada (respuesta y error) a la promesa devuelta por fetch() .
Si no tuviera que usar promesas, tendría que await la llamada fetch() , pero entonces la persona que llama no recibirá la respuesta hasta que se resuelva la promesa, que no es lo que quiero.
Entonces... ¿es posible convertir este código en async/await completo?
El siguiente código, que usa async y await, hace lo mismo que su código:
// A simple promise response const mockFetch = async (resource, init) => 'Response' const fetchWrapper = async (resource, init) => { console.log('About to fetch...', resource) // You'll replace 'mockFetch' with 'fetch' const p = mockFetch(resource, init); // You can use a named function instead (async () => { try { const response = await p console.log('The response is:', response) } catch (error) { console.log('The error is:', error) } })() return p } (async () => { const response = await fetchWrapper('', {}) console.log(response) })() mockFetch es para fines de demostración, deberá eliminar y reemplazar const p = mockFetch(resource, init); con const p = fetch(resource, init);
Tal vez algo como esto:
const fetchWrapper = async (resource, init) => { try { const response = await fetch(resource, init); console.log('The response is:', response); return { success: true, response }; } catch(error) { console.log('The error is:', error); return { success: false, error }; } }Para omitir el uso de .then() / .catch() podría optar por esto:
const fetchWrapper = (resource, init) => { // do stuff before fetch here ^^ // ... // call the fetch const p = fetch(resource, init) const afterFetchEffects = async () => { // since it is "detached" (i call it like so..) // you should ofc use try/catch try { // wait for the fetch() to finish await p // do some stuff after fetch // ... } catch(err) { console.error('Error in detached after fetch promise..', err) } } // execute the wrapper which executes something after the fetch.. // do not await it then it will do its own business. afterFetchEffects() // pass fetch immediatly back return p }No estoy seguro de qué enfoque es más legible ^^