Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

2.5. Les promesses

Les promesses, ou « promises » en anglais, étaient déjà présentes dans AngularJS. Pour ceux qui ne voient pas de quoi on parle, nous allons voir ça tout de suite.

L’objectif des promesses est de simplifier la programmation asynchrone. En général, on utilise les fonctions de callbacks (des fonctions anonymes qui sont appelées à certains moments dans votre application), mais les Promesses sont plus pratiques que les Callbacks. Voici par exemple un code avec des callbacks, pour afficher la liste d’amis d’un utilisateur quelconque :

getUser(userId, function(user) { 
 getFriendsList(user, function(friends) { 
  showFriends(friends); 
 }); 
});

L’exemple ci-dessus permet de récupérer un objet user à partir de son identifiant, puis de récupérer la liste de ses amis, et enfin d’afficher cette liste. On constate que ce code est très verbeux, et qu’il sera vite compliqué de le maintenir. Les promesses nous proposent un code plus efficace et plus élégant : 

getUser(userId) 
.then(function(user) { 
 getFriendsList(user); 
}) 
.then(function(friends) { 
 showFriends(friends); 
});

Il n’y a même pas besoin d’explications j’espère : le code est assez clair, il parle de lui-même !

Heu, oui peut-être, mais c’est quoi cette méthode « then » ?

Vous avez raison, je ne vous ai pas encore tout dit. En fait, lorsque vous créez une promesse (avec la classe Promise), vous lui associez implicitement une méthode then, et cette méthode prend deux arguments : une fonction en cas de succès et une autre fonction en cas d’erreur. Ainsi, lorsque la promesse est réalisée, c’est la fonction de succès qui est appelée, et en cas d’erreur, c’est la fonction d’erreur qui est invoquée.

Voici un exemple d’une promesse qui récupère un utilisateur depuis un serveur distant, à partir de son identifiant :

let getUser = function(userId) { 
 return new Promise(function(resolve, reject) { 
  // Appel asynchrone au serveur pour récupérer les informations d'un utilisateur... 
  // À partir de la réponse du serveur, j'extrais les données de l'utilisateur : 
  let user = response.data.user; 
  if(response.status === 200) { 
   resolve(user); 
  } else { 
   reject('Cet utilisateur n\'existe pas.'); 
  } 
 }) 
}

Et voilà, vous venez de créer une promesse ! Vous pouvez ensuite l’utiliser avec la méthode then dans votre application :

getUser(userId) 
 .then(function (user) { 
 console.log(user); // en cas de succès 
}, function (error) { 
 console.log(error); // en cas d'erreur 
});

Voilà, vous en savez déjà un peu plus sur les Promesses. Je voudrais justement vous montrer autre chose qui pourrait vous intéresser, les arrow functions, qui vous permettent de simplifier l’écriture des fonctions anonymes : cela se combine parfaitement avec l’utilisation des promesses.