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 devoluciones de llamada, utilizando JavaScript

Supongamos que tiene este problema: está haciendo una llamada asincrónica y necesita que el resultado de esa llamada sea devuelto por la función original.

Como esto:

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

peroasynchronousFunction()realiza alguna llamada asincrónica en él (por ejemplo, unfetch()call) y no puede devolver directamente el valor del resultado. Quizás internamente tiene una promesa que debe esperar o una devolución de llamada. Como esto:

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

¿Qué puedes hacer tú en su lugar?

Async / await es la solución más sencilla. Usas elawaitpalabra 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 enmainFunctionnecesitamos agregar async a la firma de la función, y esperar antes de llamarasynchronousFunction():

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 recuperar el resultado, puede envolver esto en un IIFE como este:

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

El códigoaspectocomo el código síncrono al que está acostumbrado en otros lenguajes, pero es completamente asíncrono.

Otro enfoque es utilizar devoluciones de llamada. Pero mientras con async / await podríamos cambiar solo elasynchronousFunction()código, en este caso tenemos que

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

He aquí un ejemplo.asynchronousFunction()recibe una nueva función como parámetro, que llamamoscallback. Lo invoca pasando elresponseobjeto:

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

Esta función es pasada pormainFunction:

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

asynchronousFunction(callback) }

La última pieza del rompecabezas está en la función que llamamainFunction. Dado que no podemos devolver la respuesta directamente desdemainFunction, debido a que obtenemos eso de forma asincrónica, la función de llamada debe cambiar la forma en que la procesa.

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

const callbackFunction = result => {
  console.log(result)
}

const mainFunction = callback => { asynchronousFunction(callback) }

//call the code mainFunction(callbackFunction)


Más tutoriales de js: