Comment renvoyer le résultat d'une fonction asynchrone en JavaScript

Découvrez comment renvoyer le résultat d'une fonction asynchrone, basée sur une promesse ou basée sur un rappel, à l'aide de JavaScript

Supposons que vous ayez ce problème: vous effectuez un appel asynchrone et vous avez besoin que le résultat de cet appel soit renvoyé par la fonction d'origine.

Comme ça:

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

maisasynchronousFunction()effectue un appel asynchrone (par exemple, unfetch()call), et ne peut pas renvoyer directement la valeur du résultat. Peut-être qu'en interne, il a une promesse à attendre ou un rappel. Comme ça:

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

Que pouvez-vous faire à la place?

Async / await est la solution la plus simple. Vous utilisez leawaitmot clé au lieu d'une approche basée sur la promesse, comme celle que nous avons utilisée auparavant:

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

Dans ce cas, dansmainFunctionnous devons ajouter async à la signature de la fonction et attendre avant d'appelerasynchronousFunction():

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

Maintenant, cela renvoie une promesse, car c'est une fonction asynchrone:

mainFunction() //returns a Promise

Donc, pour obtenir le résultat, vous pouvez envelopper ceci dans un IIFE comme ceci:

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

Le coderegardscomme le code synchrone auquel vous êtes habitué dans d'autres langues, mais il est complètement asynchrone.

Une autre approche consiste à utiliser des rappels. Mais avec async / await, nous pourrions changerasynchronousFunction()code, dans ce cas, nous devons

  1. modifier leasynchronousFunction()code
  2. modifier lemainFunction()code
  3. modifier également le code d'appel

Voici un exemple.asynchronousFunction()reçoit une nouvelle fonction en tant que paramètre, que nous appelonscallback. Il l'invoque en passant leresponseobjet:

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

Cette fonction est passée parmainFunction:

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

asynchronousFunction(callback) }

La dernière pièce du puzzle est dans la fonction qui appellemainFunction. Puisque nous ne pouvons pas renvoyer la réponse directement demainFunction, parce que nous obtenons cela de manière asynchrone, la fonction appelante doit changer la façon dont elle la traite.

Donc au lieu deconst result = mainFunction(), nous pourrions utiliser

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

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

//call the code mainFunction(callbackFunction)

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: