JavaScript Fonctions asynchrones par rapport aux promesses


Exemple

async fonctions async ne remplacent pas le type Promise ; ils ajoutent des mots-clés linguistiques qui facilitent les promesses. Ils sont interchangeables:

async function doAsyncThing() { ... }

function doPromiseThing(input) { return new Promise((r, x) => ...); }

// Call with promise syntax
doAsyncThing()
    .then(a => doPromiseThing(a))
    .then(b => ...)
    .catch(ex => ...);

// Call with await syntax
try {
    const a = await doAsyncThing();
    const b = await doPromiseThing(a);
    ...
}
catch(ex) { ... }

Toute fonction qui utilise des chaînes de promesses peut être réécrite en utilisant await :

function newUnicorn() {
  return fetch('unicorn.json')                     // fetch unicorn.json from server
  .then(responseCurrent => responseCurrent.json()) // parse the response as JSON
  .then(unicorn =>
    fetch('new/unicorn', {                         // send a request to 'new/unicorn' 
        method: 'post',                            // using the POST method
        body: JSON.stringify({unicorn})            // pass the unicorn to the request body
    })
  )
  .then(responseNew => responseNew.json())
  .then(json => json.success)                      // return success property of response
  .catch(err => console.log('Error creating unicorn:', err));
 }

La fonction peut être réécrite en utilisant async / await comme suit:

async function newUnicorn() {
  try {
    const responseCurrent = await fetch('unicorn.json'); // fetch unicorn.json from server
    const unicorn = await responseCurrent.json();        // parse the response as JSON
    const responseNew = await fetch('new/unicorn', {     // send a request to 'new/unicorn'
      method: 'post',                                    // using the POST method
      body: JSON.stringify({unicorn})                    // pass the unicorn to the request body
    });
    const json = await responseNew.json();
    return json.success                                  // return success property of response
  } catch (err) {
    console.log('Error creating unicorn:', err);
  }
}

Cette variante async de newUnicorn() semble renvoyer une Promise , mais en réalité, il y avait plusieurs mots clés en await . Chacun a rendu une Promise , alors vraiment nous avions une collection de promesses plutôt qu'une chaîne.

En fait , nous pouvons penser en function* générateur, chaque await d' être un yield new Promise . Cependant, les résultats de chaque promesse sont nécessaires pour que la fonction continue. C'est pourquoi le mot-clé async est nécessaire sur la fonction (ainsi que le mot-clé await lors de l'appel des promesses) car il indique à Javascript de créer automatiquement un observateur pour cette itération. La Promise renvoyée par la async function newUnicorn() résolue à la fin de cette itération.

Pratiquement, vous n'avez pas besoin de considérer cela; await cache la promesse et async cache l'itération du générateur.

Vous pouvez appeler des fonctions async comme si elles étaient des promesses, et await toute promesse ou toute fonction async . Vous n'avez pas besoin d' await une fonction asynchrone, tout comme vous pouvez exécuter une promesse sans .then() .

Vous pouvez également utiliser un async IIFE si vous souhaitez exécuter ce code immédiatement:

(async () => {
  await makeCoffee()
  console.log('coffee is ready!')
})()