Gestion des Promesses et les Sets en JavaScript : Des Outils Asynchrones pour les Développeurs

===========================================================

L’asynchrone est devenu un aspect essentiel du développement web moderne. Les promesses (promises) et les sets sont deux des outils les plus puissants pour gérer l’asynchrone en JavaScript. Dans cet article, nous allons vous guider pas à pas dans la compréhension et l’utilisation de ces concepts clés.

42.9 : Fonction de Retard avec setTimeout()

Avant de plonger dans les promesses et les sets, il est important de comprendre comment fonctionne setTimeout(), qui permet d’exécuter une fonction ou évaluer une expression après un certain temps. Voici un exemple simple :

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

wait(5000).then(() => {
  console.log('5 secondes ont passé...');
});

Dans cet exemple, la fonction wait() prend une durée en millisecondes (ms) et retourne une promesse. Cette promesse est résolue après le temps spécifié.

42.10 : Promisifier les valeurs avec Promise.resolve()

La méthode Promise.resolve() permet de convertir n’importe quelle valeur en promesse. Voici quelques exemples :

let resolved = Promise.resolve(2);
resolved.then(value => {
  // valeur === 2
});

let one = new Promise(resolve => setTimeout(() => resolve(2), 1000));
let two = Promise.resolve(one);
two.then(value => {
  // 1 seconde est passée
  // valeur === 2
});

En effet, Promise.resolve() prend en compte non seulement les valeurs mais aussi les objets qui implémentent la méthode then(), ce qui permet de convertir des valeurs non promisées en promesses.

42.11 : Utiliser ES2017 async/await

L’approche async/await est une façon encore plus intuitive d’écrire du code asynchrone. Elle permet l’utilisation de la syntaxe try/catch pour gérer les erreurs. Voici un exemple :

async function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', () => {
      reject(new Error(`Échec de chargement ${url}`));
    });
    img.src = url;
  });
}

(async () => {
  try {
    let img = await loadImage('http://example.com/image.png');
    document.getElementById('image-holder').appendChild(img);
  } catch (error) {
    console.error(error);
  }
})();

42.12 : Nettoyage avec finally()

Le bloc finally() est un concept qui permet d’exécuter une fonction indépendamment du statut de la promesse. Il s’agit notamment d’un bon moyen pour le nettoyage :

var loadingData = true;
fetch('/data')
  .then(result => processData(result.data))
  .catch(error => console.error(error))
  .finally(() => {
    loadingData = false;
  });

Cependant, attention : la fonction finally() n’affecte pas le statut de la promesse. Elle ne modifie donc pas son résultat.

42.13 : forEach avec Promesses

L’utilisation de Promise.resolve permet d’appliquer une fonction renvoyant une promesse à chaque élément d’un tableau, avec des résultats synchrones pour chaque élément :

function promiseForEach(arr, cb) {
  var i = 0;
  var nextPromise = function () {
    if (i >= arr.length) {
      // Traitement terminé.
      return;
    }
    // Traiter le prochain élément.
    const newPromise = Promise.resolve(cb(arr[i], i));
    i++;
    // Chainage pour terminer le traitement.
    return newPromise.then(nextPromise);
  };
  // Lancer la chaîne.
  return Promise.resolve().then(nextPromise);
}

Cela peut être utile lors du traitement de milliers d’éléments, en évitant ainsi une consommation importante de mémoire.

42.14 : Appel API Asynchrone

Voici un exemple simple d’un appel API GET réalisé à l’aide d’une promesse :

var get = function(path) {
  return new Promise(function(resolve, reject) {
    let request = new XMLHttpRequest();
    request.open('GET', path);
    request.onload = resolve;
    request.onerror = reject;
    request.send();
  });
};

Pour une gestion plus robuste des erreurs, il est possible d’utiliser les fonctions onload et onerror pour traiter le statut du requêtage :

request.onload = function() {
  if (this.status >= 200 && this.status < 300) {
    if(request.response) {
      // Supposons qu'un appel réussi retourne un JSON.
      resolve(JSON.parse(request.response));
    } else {
      resolve();
    }
  } else {
    reject({ 'status': this.status, 'message': request.statusText });
  }
};

request.onerror = function() {
  reject({ 'status': this.status, 'message': request.statusText });
};

Résumé

Dans ce tutoriel, nous avons exploré les promesses et les sets en JavaScript. Ces outils permettent de gérer l’asynchrone avec une grande flexibilité. Nous avons vu comment utiliser Promise.resolve() pour promisifier des valeurs, comment écrire du code async/await pour rendre le code plus simple à lire et écrire, comment utiliser finally() pour le nettoyage, comment effectuer un traitement synchronisé sur chaque élément d’un tableau avec promiseForEach(), et comment appeler des API en utilisant les promesses.

Il est maintenant temps de vous lancer dans la création de votre propre code asynchrone !