Comprendre le JavaScript Promesses

Introduction aux promesses

Une promesse est généralement définie comme un proxy pour une valeur qui deviendra disponible.

Les promesses sont un moyen de gérer le code asynchrone, sans rester coincé dans l’enfer des rappels.

Les promesses font partie du langage depuis des années (normalisées et introduites dans ES2015), et sont récemment devenues plus intégrées, avec async et await dans ES2017.,

Les fonctions asynchrones utilisent les promesses dans les coulisses, donc comprendre comment les promesses fonctionnent est fondamental pour comprendre commentasync Etawait fonctionnent.

comment fonctionnent les promesses, en bref

Une fois qu’une promesse a été appelée, elle commencera dans un État en attente. Cela signifie que la fonction appelante continue à s’exécuter, tandis que la promesse est en attente jusqu’à sa résolution, donnant à la fonction appelante toutes les données demandées.,

la promesse créée finira dans un état résolu, ou dans un État rejeté, en appelant les fonctions de rappel respectives (passées àthenEtcatch) à la fin.

quelles API JS utilisent les promesses?

en plus de votre propre code et de votre propre code de bibliothèques, les promesses sont utilisées par les API Web modernes standard telles que:

• L’API Battery
• L’API Fetch
• Les travailleurs de Service

Il est peu probable qu’en JavaScript moderne, vous vous trouviez,

créer une promesse

L’API Promise expose un constructeur de promesse, que vous initialisez en utilisantnew Promise():

comme vous pouvez le voir, la promesse vérifie la doneconstante globale, et si cela est vrai, la promesse passe à un état résolu 1B277DAADA »> le rappel a été appelé); sinon, le rappelreject est exécuté, mettant la promesse dans un état rejeté., (Si aucune de ces fonctions n’est appelée dans le chemin d’exécution, la promesse restera dans un État en attente)

en utilisant resolve Et reject, nous pouvons communiquer à l’appelant quel était l’état de promesse résultant et quoi en faire. Dans le cas ci-dessus, nous venons de renvoyer une chaîne, mais il pourrait s’agir d’un objet, ou null également. Parce que nous avons créé la promesse dans l’extrait ci-dessus, elle a déjà commencé à s’exécuter. Ceci est important pour comprendre ce qui se passe dans la section consommer une promesse ci-dessous.,

un exemple plus courant que vous pouvez rencontrer est une technique appelée Promisifying. Cette technique est un moyen de pouvoir utiliser une fonction JavaScript classique qui prend un rappel, et de lui faire renvoyer une promesse:

dans les versions récentes de Node.js, vous n’aurez pas à faire cette conversion manuelle pour une grande partie de l’API. Il existe une fonction de promesse disponible dans le module util qui le fera pour vous, étant donné que la fonction que vous promettez a la signature correcte.,

la consommation d’une promesse

Dans la dernière section, nous avons présenté comment une promesse est créé.

voyons maintenant comment la promesse peut être consommée ou utilisée.

Exécution checkIfItsDone() va spécifier les fonctions à exécuter lorsque la balise isItDoneYet promesse est résolu (dans la balise then appel) ou rejette (dans la balise catch appel).

enchaînement des promesses

Une promesse peut être renvoyée à une autre promesse, créant une chaîne de promesses.,

l’API Fetch, que nous pouvons utiliser pour obtenir une ressource et mettre en file d’attente une chaîne de promesses à exécuter lorsque la ressource est récupérée, est un excellent exemple de chaînage de promesses.

L’API Fetch est un mécanisme basé sur la promesse, et appelerfetch() équivaut à définir notre propre promesse en utilisantnew Promise().

exemple d’enchaînement de promesses

dans cet exemple, nous appelonsfetch() pour obtenir une liste D’éléments à faire à partir du fichiertodos.json trouvé dans la racine du domaine, et nous créons une chaîne de promesses.,

L’exécution de fetch() renvoie une réponse, qui a de nombreuses propriétés, et dans celles-ci, nous faisons référence:

• status, une valeur numérique représentant le code D’état HTTP
• statusText, un message d’état, qui est OK si la requête a réussi

response a également une méthode json(), qui renvoie une promesse qui se résoudra avec le contenu du corps traité et transformé en JSON.,

compte tenu de ces prémisses, voici ce qui se passe: la première promesse de la chaîne est une fonction que nous avons définie, appeléestatus(), qui vérifie l’état de la réponse et si ce n’est pas une réponse réussie (entre 200 et 299), elle rejette la promesse.

cette opération fera sauter la chaîne de promesses toutes les promesses chaînées répertoriées et passera directement à l’instructioncatch() en bas, en enregistrant le texteRequest failed avec le message d’erreur.,

Si cela réussit à la place, il appelle la fonctionjson() que nous avons définie. Étant donné que la promesse précédente, en cas de succès, renvoyait l’objet response, nous l’obtenons en entrée de la deuxième promesse.

dans ce cas, nous renvoyons les données JSON traitées, de sorte que la troisième promesse reçoit directement le JSON:

.then((data) => { console.log('Request succeeded with JSON response', data)})

et nous l’enregistrons simplement sur la console.

gestion des erreurs

dans l’exemple, dans la section précédente, nous avions uncatch qui était ajouté à la chaîne de promesses.,

lorsque quelque chose dans la chaîne de promesses échoue et déclenche une erreur ou rejette la promesse, le contrôle passe à l’instructioncatch() la plus proche en bas de la chaîne.

erreurs en cascade

Si à l’intérieur ducatch() vous déclenchez une erreur, vous pouvez ajouter un secondcatch() pour le gérer, et ainsi de suite.

new Promise((resolve, reject) => { throw new Error('Error')}) .catch(err => { throw new Error('Error') }) .catch(err => { console.error(err) })

l’Orchestration de promesses

Promesse.,all ()

Si vous devez synchroniser différentes promesses,Promise.all() vous aide à définir une liste de promesses et à exécuter quelque chose lorsqu’elles sont toutes résolues.

Exemple:

Le ES2015 déstructuration syntaxe vous permet de faire

Promise.all().then(() => { console.log('Results', res1, res2)})

Vous n’êtes pas limité à l’aide de fetch bien sûr, toute promesse peut être utilisé dans ce mode.

Promesse.,race ()

Promise.race() s’exécute lorsque la première des promesses que vous lui transmettez est résolue, et il exécute le rappel attaché une seule fois, avec le résultat de la première promesse résolue.,

exemple:

erreurs courantes

Uncaught TypeError: undefined n’est pas une promesse

Si vous obtenez l’erreurUncaught TypeError: undefined is not a promise dans la console, assurez-vous d’utilisernew Promise() au lieu de simplementPromise()

Unhandledpromiserejectionwarning

cela signifie qu’une promesse que vous avez appelée a été rejetée, mais il n’y avait pascatch utilisé pour gérer l’erreur. Ajouter un catch après la délinquance then pour gérer cela correctement.