Cómo devolver el resultado de una función asincrónica en JavaScript

Descubra cómo devolver el resultado de una función asincrónica, basada en promesas o en devoluciones de llamadas, mediante JavaScript

Digamos que tienes este problema: estás realizando una llamada asincrónica y necesitas que el resultado de esa llamada se devuelva desde la función original.

Como esto:

const mainFunction = () = { const result = asynchronousFunction() return result}

pero asynchronousFunction()realiza una llamada asincrónica en él (por ejemplo, una fetch()llamada) y no puede devolver directamente el valor del resultado. Quizás internamente tiene una promesa que debe esperar o una devolución de llamada. Así:

const asynchronousFunction = () = { return fetch('./file.json').then(response = { return response })}

¿Qué puedes hacer en su lugar?

Async/await es la solución más sencilla. Se utiliza la awaitpalabra clave en lugar de un enfoque basado en promesas, como el que usamos antes:

const asynchronousFunction = async () = { const response = await fetch('./file.json') return response}

En este caso, mainFunctionnecesitamos agregar async a la firma de la función y esperar antes de llamar asynchronousFunction():

const mainFunction = async () = { const result = await asynchronousFunction() return result}

Ahora esto devuelve una promesa, porque es una función asíncrona:

mainFunction() //returns a Promise

Entonces, para obtener el resultado, puedes envolverlo en un IIFE de esta manera:

(async () = { console.log(await mainFunction())})()

El código parece el código sincrónico al que estamos acostumbrados en otros lenguajes, pero es completamente asincrónico.

Otro enfoque es utilizar devoluciones de llamadas. Pero mientras que con async/await podríamos cambiar solo el asynchronousFunction()código, en este caso tenemos queTe recomendamos SEO y posicionamiento SEO

1. modificar el asynchronousFunction()código
2. modificar el mainFunction()código
3. modificar también el código de llamada

A continuación, se muestra un ejemplo. asynchronousFunction()Recibe una nueva función como parámetro, a la que llamamos callback. La invoca pasando el responseobjeto:

const asynchronousFunction = callback = { return fetch('./file.json').then(response = { callback(response) })}

Esta función se pasa por mainFunction:

const mainFunction = () = { const callback = result = { console.log(result) } asynchronousFunction(callback)}

La última pieza del rompecabezas está en la función que llama a mainFunction. Como no podemos devolver la respuesta directamente desde mainFunction, porque la obtenemos de forma asincrónica, la función que llama debe cambiar la forma en que la procesa.

Entonces, en lugar de const result = mainFunction(), podríamos usar

const callbackFunction = result = { console.log(result)}const mainFunction = callback = { asynchronousFunction(callback)}//call the codemainFunction(callbackFunction)

Tips para principiantes de JavaScript

Tal vez te puede interesar:

1. Cómo generar un número aleatorio entre dos números en JavaScript
2. Cómo esperar el evento DOM listo en JavaScript simple
3. Cómo determinar si una fecha es hoy en JavaScript
4. Cómo contar el número de propiedades en un objeto JavaScript

Cómo devolver el resultado de una función asincrónica en JavaScript

Descubra cómo devolver el resultado de una función asincrónica, basada en promesas o en devoluciones de llamadas, mediante JavaScript

programar

es

2025-01-22

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente