JavaScript : principe des Promesses

Auteur·rice

Yosko

Les bases

Élément à expliquer (TODO) :

  1. Rappeler les principes d’asynchronicité
  2. les bases des Promises (Promise basics (en)).
  3. exemple : fetch
  4. principe d’une fonction async + un exemple maison
  5. utilisation du await

Promesses multiples

Pour attendre le succès de plusieurs promesses d’un coup, on utilise Promise.all() (voir doc).

Un exemple d’utilisation qui s’occupe de :

  1. effectuer des requêtes Http via fetch (qui utilise le système de Promise)
  2. effectuer un parsing Json de la réponse (quand elle arrive). Là aussi, la méthode .json() (voir doc) repose sur le système de Promise.
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);
});

Il y a d’autres approches aux Promises multiples, plutôt que le Promise.all() : Promise.allSettled() ou Promise.race(), par exemple (Promise API (en)).