DevWiki de Yosko

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Principe des Promises ======

===== Les bases =====
FIXME à expliquer :
  - Rappeler les principes d'asynchronicité
  - les bases des Promises ([[https://javascript.info/promise-basics|lien en anglais]]).
  - exemple : fetch
  - principe d'une fonction async + un exemple maison
  - utilisation du await

===== Promises multiples =====
Pour attendre le succès de plusieurs promesses d'un coup, on utilise [[https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/all|Promise.all()]].

Un exemple d'utilisation qui s'occupe de :
  - effectuer des requêtes Http via [[https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch|fetch]] (qui utilise le système de Promise)
  - effectuer un parsing Json de la réponse (quand elle arrive). Là aussi, la méthode [[https://developer.mozilla.org/fr/docs/Web/API/Body/json|json()]] repose sur le système de Promise.

<code javascript>
async function synced_json_fetch(urls = [], callback) {
    promises = [];
    
    // start fetching each url
    // we don't store the fetch promises, we juste use it right away (asynchronously, of course) to start to parse its Json
    // we store json parsing promises into a new array
    request_urls.forEach(url => promises.push( fetch(url).then(function(response) { return response.json(); }) ))

    // we use a single then() for multiple promises (that way, we make them sync, meaning we will wait for the last of them to finish before calling the callback function)
    return Promise.all(promises).then(callback);
}

// exemple of use
request_urls = [
    "http://url1",
    "http://url2",
    "http://url3"
];


synced_json_fetch(request_urls, function(values) {
    // code executed only when every url fetching and parsing will be done
    console.log(values);
});

// other way to call it, using then on the returned promise
synced_json_fetch(request_urls).then(function(values) {
    // code executed only when every url fetching and parsing will be done
    console.log(values);
});
</code>

Il y a d'autres approches aux Promises multiples, plutôt que le Promise.all() : Promise.allSettled() ou Promise.race(), par exemple ([[https://javascript.info/promise-api|page en anglais expliquant les différences]]).