diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2022-02-02 09:45:01 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-02-02 09:45:01 +0100 |
| commit | 736104fce4cc1d52e3ffd2101612f7c30784dc24 (patch) | |
| tree | 5ccb5d91104b372788c25d9da4a415032ee180f7 /files/fr/web/javascript/reference | |
| parent | e53d0db2882675fe97344be50e0d181b7cd97337 (diff) | |
| download | translated-content-736104fce4cc1d52e3ffd2101612f7c30784dc24.tar.gz translated-content-736104fce4cc1d52e3ffd2101612f7c30784dc24.tar.bz2 translated-content-736104fce4cc1d52e3ffd2101612f7c30784dc24.zip | |
Remove mozillademo from JS page in French (#3570)
* update typed arrays vs en-US
* Fix typos
* Update atan2 vs en-US
* update Debugger vs en-US
* Update js fguide intro vs en-US
* Update promise vs en-US
* Update JS indexed coll page vs en-US
Diffstat (limited to 'files/fr/web/javascript/reference')
3 files changed, 253 insertions, 121 deletions
diff --git a/files/fr/web/javascript/reference/global_objects/math/atan2/index.md b/files/fr/web/javascript/reference/global_objects/math/atan2/index.md index c95dd9050b..3b775a6514 100644 --- a/files/fr/web/javascript/reference/global_objects/math/atan2/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/atan2/index.md @@ -1,40 +1,38 @@ --- title: Math.atan2() slug: Web/JavaScript/Reference/Global_Objects/Math/atan2 -tags: - - JavaScript - - Math - - Méthode - - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2 original_slug: Web/JavaScript/Reference/Objets_globaux/Math/atan2 +browser-compat: javascript.builtins.Math.atan2 --- {{JSRef}} -La fonction **`Math.atan2()`** renvoie l'arc tangente du quotient de ses arguments. +La fonction **`Math.atan2()`** renvoie l'arc tangente du quotient de ses arguments, ce qui, pour `Math.atan2(y,x)`, correspond à l'angle plan (exprimé en radians) entre la droite passant par l'origine et le point de coordonnées (x,y). {{EmbedInteractiveExample("pages/js/math-atan2.html")}} ## Syntaxe - Math.atan2(y, x) +```js +Math.atan2(y, x) +``` ### Paramètres -- `x` - - : La coordonnée en abscisse du point. - `y` - : La coordonnée en ordonnée du point. +- `x` + - : La coordonnée en abscisse du point. ### Valeur de retour -L'arc tangente du quotient formé par les deux arguments, c'est-à-dire l'angle, exprimé en radians entre l'axe des abscisses et la droite passant par l'origin (0,0) et le point de coordonnées (x,y). +L'arc tangente du quotient formé par les deux arguments (compris dans <math><semantics><mrow><mo stretchy="false">[</mo><mo>-</mo><mi>π</mi><mo>,</mo><mi>π</mi><mo stretchy="false">]</mo></mrow><annotation encoding="TeX">[-\pi, \pi]</annotation></semantics></math>), c'est-à-dire l'angle, exprimé en radians entre l'axe des abscisses et la droite passant par l'origin (0,0) et le point de coordonnées (x,y). ## Description La méthode `Math.atan2()` renvoie une valeur numérique comprise entre -Pi et Pi qui représente l'angle theta d'un point de coordonnées (x,y). Cela correspond à l'angle (dans le sens trigonométrique) entre l'axe des abscisses et le point de coordonnées (`x,y`). Attention, le premier argument de la fonction est l'ordonnée (y) et le second est l'abscisse (x). - + `Math.atan2()` utilise deux arguments `x` et `y`, alors que la méthode `Math.atan()` utilise le ratio de deux nombres comme un seul argument. @@ -63,22 +61,17 @@ Math.atan2( ±Infinity, +Infinity ); // ±PI/4. ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.atan2', 'Math.atan2')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("javascript.builtins.Math.atan2")}} +{{Compat}} ## Voir aussi -- {{jsxref("Math.acos()")}} -- {{jsxref("Math.asin()")}} -- {{jsxref("Math.atan()")}} -- {{jsxref("Math.cos()")}} -- {{jsxref("Math.sin()")}} -- {{jsxref("Math.tan()")}} +- [`Math.acos()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/acos) +- [`Math.asin()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/asin) +- [`Math.atan()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/atan) +- [`Math.cos()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/cos) +- [`Math.sin()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sin) +- [`Math.tan()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/tan) diff --git a/files/fr/web/javascript/reference/global_objects/promise/index.md b/files/fr/web/javascript/reference/global_objects/promise/index.md index cd1f9babc5..64a34a483c 100644 --- a/files/fr/web/javascript/reference/global_objects/promise/index.md +++ b/files/fr/web/javascript/reference/global_objects/promise/index.md @@ -1,31 +1,17 @@ --- title: Promise slug: Web/JavaScript/Reference/Global_Objects/Promise -tags: - - ECMAScript 2015 - - JavaScript - - Promise - - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Promise original_slug: Web/JavaScript/Reference/Objets_globaux/Promise +browser-compat: javascript.builtins.Promise --- {{JSRef}} L'objet **`Promise`** (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur voire jamais. -> **Note :** Cet article décrit le constructeur `Promise`. Pour en savoir plus sur les promesses en général, nous vous conseillons de lire l'article [Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses). Le constructeur `Promise` est principalement utilisé pour envelopper des fonctions qui ne prennent pas en charge les promesses. +{{AvailableInWorkers}} -{{EmbedInteractiveExample("pages/js/promise-constructor.html")}} - -## Syntaxe - - new Promise( /* exécuteur */ function(resolve, reject) { ... } ); - -### Paramètres - -- `exécuteur` - - : Une fonction à laquelle on passera deux arguments : `resolve` et `reject`. Cette fonction est exécutée immédiatement par l'implémentation de **`Promise`** qui fournit les fonctions `resolve` et `reject` (elle est exécutée avant que le constructeur **`Promise`** ait renvoyé l'objet créé). Les fonctions `resolve` et `reject`, lorsqu'elles sont appelées, permettent respectivement de tenir ou de rompre la promesse. On attend de l'exécuteur qu'il démarre un travail asynchrone puis, une fois le travail terminé, appelle la fonction `resolve` (si tout s'est bien passé) ou la fonction `reject` (lorsqu'il y a eu un problème) pour définir l'état final de la promesse. - Si une erreur est générée par l'exécuteur, la promesse est rompue et la valeur de retour de l'exécuteur est ignorée. +Pour apprendre comment fonctionnent les promesses et comment les utiliser, nous vous conseillons de commencer par l'article [Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Using_promises) du guide JavaScript. ## Description @@ -35,103 +21,268 @@ Une `Promise` est dans un de ces états : - _pending (en attente)_ : état initial, la promesse n'est ni remplie, ni rompue ; - _fulfilled (tenue_) : l'opération a réussi ; -- _rejected (rompue)_ : l'opération a échoué ; -- _settled (acquittée)_ : la promesse est tenue ou rompue mais elle n'est plus en attente. +- _rejected (rompue)_ : l'opération a échoué. + +Une promesse en attente peut être _tenue_ avec une valeur ou _rompue_ avec une raison (erreur). Quand on arrive à l'une des deux situations, les gestionnaires associés lors de l'appel de la méthode `then` sont alors appelés. Si la promesse a déjà été tenue ou rompue lorsque le gestionnaire est attaché à la promesse, le gestionnaire est appelé. Cela permet qu'il n'y ait pas de situation de compétition entre une opération asynchrone en cours et les gestionnaires ajoutés. -Une promesse en attente peut être _tenue_ avec une valeur ou _rompue_ avec une raison (erreur). Quand on arrive à l'une des deux situations, les gestionnaires associés lors de l'appel de la méthode `then` sont alors appelés. (Si la promesse a déjà été tenue ou rompue lorsque le gestionnaire est attaché à la promesse, le gestionnaire est appelé. Cela permet qu'il n'y ait pas de situation de compétition entre une opération asynchrone en cours et les gestionnaires ajoutés). +Les méthodes [`Promise.prototype.then()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) et [`Promise.prototype.catch()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) renvoient des promesses et peuvent ainsi être chaînées. C'est ce qu'on appelle une _composition_. -Les méthodes {{jsxref("Promise.then","Promise.prototype.then()")}} et {{jsxref("Promise.catch","Promise.prototype.catch()")}} renvoient des promesses et peuvent ainsi être chaînées. C'est ce qu'on appelle une _composition_. + - +> **Note :** D'autres langages utilisent des mécanismes d'évaluation à la volée (<i lang="en">lazy evaluation</i>) et de déport des calculs (<i lang="en">deferring computations</i>). Ces mécanismes sont également intitulés promesses (<i lang="en">promises</i>). En JavaScript, les promesses correspondent à des processus déjà lancés et qui peuvent être chaînés avec des fonctions de retour. Si vous cherchez à retarder l'évaluation, vous pouvez utiliser les fonctions fléchées sans arguments (ex. `f = () => expression`) afin de créer une expression à évaluer plus tard et utiliser `f()` pour l'évaluer au moment voulu. -> **Note :** Une promesse est dans l'état _settled_ (acquittée) qu'elle soit tenue ou rompue mais plus en attente. Le terme _resolved_ (résolue) est aussi utilisé concernant les promesses — cela signifie que la promesse est acquittée ou bien enfermée dans une chaine de promesse. Le billet de Domenic Denicola, [_States and fates_ (en anglais)](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md), contient de plus amples détails sur la terminologie utilisée. +> **Note :** On dit qu'une promesse est dans l'état <i lang="en">settled</i> (acquittée) qu'elle soit tenue ou rompue mais plus en attente. Le terme <i lang="en">resolved</i> (résolue) est aussi utilisé concernant les promesses — cela signifie que la promesse est acquittée ou bien enfermée dans une chaine de promesse. Le billet de Domenic Denicola, [<i lang="en">States and fates</i> (en anglais)](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md), contient de plus amples détails sur la terminologie utilisée. -> **Attention :** D'autres langages utilisent des mécanismes d'évaluation à la volée (_lazy evaluation_) et de déport des calculs (_deferring computations_). Ces mécanismes sont également intitulés promesses (_promises_). En JavaScript, les promesses correspondent à des processus déjà lancés et qui peuvent être chaînés avec des fonctions de retour. Si vous cherchez à retarder l'évaluation, vous pouvez utiliser les fonctions fléchées sans arguments (ex. `f = () => expression`) afin de créer une expression à évaluer plus tard et utiliser `f()` pour l'évaluer au moment voulu. +### Enchaînement de promesses -## Propriétés +Les méthodes `promise.then()`, `promise.catch()`, et `promise.finally()` sont utilisées pour associer une action ultérieure à une promesse lorsque celle-ci devient acquittée. -- `Promise.length` - - : Une propriété de longueur qui vaut 1 (le nombre d'arguments pour le constructeur). -- {{jsxref("Promise.prototype")}} - - : Cette propriété représente le prototype du constructeur `Promise`. +La méthode `.then()` prend deux arguments : le premier est une fonction de rappel (<i lang="en">callback</i>) pour le cas de résolution de la promesse et le second argument est une fonction de rappel pour le cas d'échec. Chaque invocation de `.then()` renvoie une nouvelle promesse qui peut éventuellement être utilisée chaînée à une autre promesse : -## Méthodes +```js +const maPromesse = new Promise((resolve, reject) => { + setTimeout(() => { + resolve('toto'); + }, 300); +}); + +maPromesse + .then(gestionnaireSuccesA, gestionnaireEchecA) + .then(gestionnaireSuccesB, gestionnaireEchecB) + .then(gestionnaireSuccesC, gestionnaireEchecC); +``` + +Le traitement continue pour chaque étape de la chaîne, même lorsque `.then()` ne possède pas de fonction de rappel renvoyant une promesse. Ainsi, une chaîne d'appels peut très bien omettre les différentes fonctions de rappel pour les cas d'échec jusqu'au `.catch()` final. + +La gestion d'une promesse rompue dans chaque `.then()` a des conséquences plus loin dans la chaîne de promesses. Il n'y a parfois pas le choix, car il faut gérer l'erreur immédiatement. Dans de tels cas, on peut lever une erreur d'un certain type et maintenir cet état d'erreur le long de la chaîne. Autrement, s'il n'est pas nécessaire d'avoir un traitement immédiat, mieux vaut laisser la gestion de l'erreur jusq'au `.catch()` final. Un appel à `.catch()` peut être vu comme un `.then()` qui n'a qu'une fonction de rappel pour gérer les cas d'échec. + +```js +maPromesse +.then(gestionnaireSuccesA) +.then(gestionnaireSuccesB) +.then(gestionnaireSuccesC) +.catch(gestionnaireToutEchec); +``` + +On peut utiliser les [expressions de fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions) pour les fonctions de rappel. Un enchaînement avec cette forme pourra alors ressembler à : + +```js +promesse1 +.then(valeur => { return valeur + ' et truc'; }) +.then(valeur => { return valeur + ' et truc bla'; }) +.then(valeur => { return valeur + ' et blabla'; }) +.then(valeur => { return valeur + ' et blabla'; }) +.then(valeur => { console.log(valeur) }) +.catch(err => { console.log(err) }); +``` + +La condition de terminaison d'une promesse détermine son état d'acquittement pour la prochaine promesse de la chaîne. Une promesse tenue indique un succès tandis qu'une promesse rompue indique un échec. La valeur de retour pour chaque promesse résolue de la chaîne est passée à la suivante avec `.then()`, alors que la raison de l'échec est passée au prochain gestionnaire d'échec dans la chaîne. + +Les promesses d'une chaîne sont imbriquées comme des poupées russes, mais le démarrage se fait au niveau le plus imbriqué. + +```plain +(promesse D, (promesse C, (promesse B, (promesse A) ) ) ) +``` + +Lorsque la valeur qui suit une promesse est une autre promesse, on a un effet de remplacement dynamique. L'instruction `return` entraîne le « dépilement » de la promesse courante et c'est la promesse suivante qui prend sa place. Pour l'exemple d'imbrication illustré avant, si l'appel `.then()` associé à "promesse B" renvoie "promesse X", on aurait alors une situation comme celle-ci : + +```plain +(promesse D, (promesse C, (promesse X) ) ) +``` + +Une promesse peut être imbriquée à plusieurs endroits. Dans le code qui suit, la résolution de `promesseA` entraînera l'appel de deux méthodes `.then()`. + +```js +const promesseA = new Promise(uneFonction); +const promesseB = promesseA.then(gestionSucces1, gestionEchec1); +const promesseC = promesseA.then(gestionSucces2, gestionEchec2); +``` + +Il est possible d'affecter une action à une promesse qui est déjà acquittée. Dans ce cas, l'action (le cas échéant), sera réalisé à la première opportunité asynchrone, c'est-à-dire lorsque la pile d'appel aura été nettoyée et qu'un battement d'horloge se sera écoulé. On aura autrement dit un effet similaire à celui d'un `setTimeout(action,10)`. + +```js +const promesseA = new Promise( (resolutionFunc,rejectionFunc) => { + resolutionFunc(777); +}); +// Ici, "promesseA" est déjà acquittée. +promesseA.then( (val) => console.log("journalisation asynchrone / val vaut :",val) ); +console.log("journalisation immédiate"); -- {{jsxref("Promise.all", "Promise.all(iterable)")}} +// On aura alors, dans la console, la suite de messages suivante : +// journalisation immédiate +// journalisation asynchrone / val vaut : 777 +``` + +## Constructeur + +- [`Promise()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) + - : Crée un nouvel objet `Promise`. Le constructeur est principalement utilisé pour envelopper des fonctions qui ne prennent pas en charge les promesses. + +## Méthodes statiques + +- [`Promise.all(iterable)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) - : Renvoie une promesse tenue lorsque toutes les promesses de l'argument itérable sont tenues ou une promesse rompue dès qu'une promesse de l'argument itérable est rompue. Si la promesse est tenue, elle est résolue avec un tableau contenant les valeurs de résolution des différentes promesses contenues dans l'itérable (dans le même ordre que celui-ci). Si la promesse est rompue, elle contient la raison de la rupture de la part de la promesse en cause, contenue dans l'itérable. Cette méthode est utile pour agréger les résultats de plusieurs promesses tous ensemble. -- {{jsxref("Promise.allSettled", "Promise.allSettled(iterable)")}} +- [`Promise.allSettled(iterable)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) - : Attend que l'ensemble des promesses aient été acquittées (tenues ou rompues) et renvoie une promesse qui est résolue après que chaque promesse ait été tenue ou rompue. La valeur de résolution de la promesse renvoyée est un tableau dont chaque élément est le résultat des promesses initiales. -- {{jsxref("Promise.race", "Promise.race(iterable)")}} +- [`Promise.any(iterable)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/any) + - : Renvoie une seule promesse dont la valeur de résolution est celle de la première promesse résolue de l'itérable passé en argument. +- [`Promise.race(iterable)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/race) - : Renvoie une promesse qui est tenue ou rompue dès que l'une des promesses de l'itérable est tenue ou rompue avec la valeur ou la raison correspondante. -- {{jsxref("Promise.reject", "Promise.reject(raison)")}} +- [`Promise.reject(raison)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject) - : Renvoie un objet `Promise` qui est rompue avec la raison donnée. -- {{jsxref("Promise.resolve", "Promise.resolve(valeur)")}} - - : Renvoie un objet `Promise` qui est tenue (résolue) avec la valeur donnée. Si la valeur possède une méthode `then`, la promesse renvoyée « suivra » cette méthode pour arriver dans son état, sinon la promesse renvoyée sera tenue avec la valeur fournie. Généralement, quand on veut savoir si une valeur est une promesse, on utilisera {{jsxref("Promise.resolve","Promise.resolve(valeur)")}} et on travaillera avec la valeur de retour en tant que promesse. - -## Prototype pour `Promise` +- [`Promise.resolve(valeur)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve) + - : Renvoie un objet `Promise` qui est tenue (résolue) avec la valeur donnée. Si la valeur possède une méthode `then`, la promesse renvoyée « suivra » cette méthode pour arriver dans son état, sinon la promesse renvoyée sera tenue avec la valeur fournie. Généralement, quand on veut savoir si une valeur est une promesse, on utilisera [`Promise.resolve(valeur)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve) et on travaillera avec la valeur de retour en tant que promesse. -### Propriétés +### Méthodes d'instance -{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Propriétés')}} +- [`Promise.prototype.catch()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) + - : Ajoute une fonction de rappel comme gestionnaire d'échec à la promesse et renvoie une nouvelle promesse dont la valeur de résolution est la valeur de retour de la fonction de rappel si cette dernière est appelée ou sinon la valeur de résolution originale de la promesse si celle-ci a réussi. +- [`Promise.prototype.then()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) + - : Ajoute un gestionnaire de succès et un gestionnaire d'échec à la promesse et renvoie une nouvelle promesse qui se résout avec la valeur de retour du gestionnaire appelé ou avec la valeur de résolution originale si la promesse n'a pas été gérée (dans le cas où `onFulfilled` ou `onRejected` n'est pas une fonction). +- [`Promise.prototype.finally()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally) + - : Ajoute un gestionnaire à la promesse et renvoie une nouvelle promesse qui est résolue lors de la résolution de la première promesse. Le gestionnaire est appelé quand la première promesse est acquittée, qu'elle ait réussi ou non. -### Méthodes - -{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Méthodes')}} +>**Note :** Voir [le guide sur les micro-tâches](/fr/docs/Web/API/HTML_DOM_API/Microtask_guide) pour en savoir plus sur la façon dont ces méthodes utilisent la queue et les services de micro-tâches. ## Exemples -### Créer une promesse - -Pour créer une promesse, on utilise l'opérateur `new` et le constructeur. Celui-ci prend en argument une fonction qui prend deux fonctions en paramètres. La première est appelée quand la tâche asynchrone est correctement terminée et la seconde est appelée quand la tâche échoue : +### Exemple simple ```js -const maPremierePromesse = new Promise((resolve, reject) => { - // réaliser une tâche asynchrone et appeler : - - // resolve(uneValeur); // si la promesse est tenue - // ou - // reject("raison d'echec"); // si elle est rompue +let maPremierePromesse = new Promise((resolve, reject) => { + // On appelle resolve(...) lorsque notre action asynchrone + // a réussi et reject(...) lorsqu'elle a échoué. + // Dans cet exemple, on utilise setTimeout(...) pour simuler + // du code asynchrone. En situation réelle, on utiliserait + // plutôt XHR ou une API Web asynchrone. + setTimeout( function() { + resolve("Succès !") // Tout s'est bien passé ! + }, 250) +}) + +maPremierePromesse.then((messageReussite) => { + // messageReussite correspond à ce qui a été passé à + // la fonction resolve(...) ci-avant. + console.log("Youpi ! " + messageReussite) }); ``` -On peut ainsi obtenir des fonctions asynchrones en renvoyant une promesse : +### Exemple avec plusieurs situations + +Cet exemple illustre différentes techniques d'utilisation des promesses et différentes situations qui peuvent se produire. + +En bas de l'exemple, on a une chaîne de promesses. Dans cet exemple, on utilise `new Promise()` pour la première promesse, mais en pratique, cela proviendrait vraisemblablement d'une fonction d'une API qui renvoie une promesse. + +La fonction `tetheredGetNumber()` illustre un générateur de promesse qui utilise `reject()` lors d'un appel asynchrone ou dans la fonction de rappel (ou dans les deux). La fonction `promiseGetWord()` illustre comment une fonction d'API peut générer et renvoyer une promesse de façon autonome. + +On notera que la fonction `troubleWithGetNumber()` finit avec `throw()`. En effet, l'exécution d'une chaîne de promesse se poursuit au travers des `.then()`, même après une erreur, sans "throw()", l'erreur pourrait sembler traitée. C'est pourquoi on voit parfois l'omission de la fonction de rappel des rejets dans les différents `.then()` et une seule fonction de rappel pour gérer les échecs dans le `catch()` final. Ici, on lève une exception avec une valeur spéciale par simplicité, mais une erreur spécialisée serait plus appropriée. + +Le code qui suit peut être exécuté dans NodeJS. N'hésitez pas à le manipuler et à tester pour mieux comprendre comment les erreurs surviennent. Pour forcer les erreurs, vous pouvez changer la valeur de `SEUIL_A`. ```js -function maFonctionAsynchrone(url) { - return new Promise((resolve, reject) => { - const xhr = new XMLHttpRequest(); - xhr.open("GET", url); - xhr.onload = () => resolve(xhr.responseText); - xhr.onerror = () => reject(xhr.statusText); - xhr.send(); - }); +"use strict"; + +// Pour tester la gestion d'erreur, on a un seuil +// qui provoquera des erreurs aléatoirement +const SEUIL_A = 8; // Abaissez ce seuil à 0 pour forcer les erreurs + +function tetheredGetNumber(resolve, reject) { + try { + setTimeout( + function() { + const randomInt = Date.now(); + const value = randomInt % 10; + try { + if(value >= SEUIL_A) { + throw new Error(`Trop grand : ${value}`); + } + } catch(msg) { + reject(`Erreur dans le callback ${msg}`); + } + resolve(value); + return; + }, 500); + // Vous pouvez expérimenter en décommentant le 'throw' + // qui suit + } catch(err) { + reject(`Erreur à l'initialisation : ${err}`); + } + return; +} + +function determineParity(value) { + const isOdd = value % 2 ? true : false ; + const parityInfo = { theNumber: value, isOdd: isOdd }; + return parityInfo; +} + +function troubleWithGetNumber(reason) { + console.error(`Problème pour avoir le nombre : ${reason}`); + throw -999; // on doit utiliser throw pour maintenir l'état d'erreur +} + +function promiseGetWord(parityInfo) { + + const tetheredGetWord = function(resolve,reject) { + const theNumber = parityInfo.theNumber; + const seuil_B = SEUIL_A - 1; + if(theNumber >= seuil_B) { + reject(`Toujours trop grand : ${theNumber}`); + } else { + parityInfo.wordEvenOdd = parityInfo.isOdd ? 'impair' : 'pair'; + resolve(parityInfo); + } + return; + } + return new Promise(tetheredGetWord); } + +(new Promise(tetheredGetNumber)) + .then(determineParity,troubleWithGetNumber) + .then(promiseGetWord) + .then((info) => { + console.log("On a eu : ",info.theNumber," , ", info.wordEvenOdd); + return info; + }) + .catch((reason) => { + if(reason === -999) { + console.error("Erreur précédemment gérée"); + } + else { + console.error(`Problème avec promiseGetWord(): ${reason}`); + } + }) + .finally((info) => console.log("C'est fini.")); ``` ### Exemple interactif +Dans le court exemple qui suit, on illustre le mécanisme d'une `Promise`. La méthode `testPromise()` est appelée chaque fois qu'on clique sur l'élément [`<button>`](/fr/docs/Web/HTML/Element/Button). Cette méthode crée une promesse qui sera tenue grâce à la fonction [`setTimeout()`](/fr/docs/Web/API/setTimeout), et avec la valeur comptePromesse (nombre commençant à 1) après `1s` à `3s` (aléatoire). Le constructeur Promise() est utilisé pour créer la promesse. + +Le fait que la promesse soit tenue est simplement enregistré via un _callback_ sur `p1.then()`. Quelques indicateurs illustrent la manière dont la partie synchrone est découplée de la partie asynchrone. + +#### HTML + ```html <button id="btn" type="button">Créer un objet Promise !</button> <div id="log"></div> ``` -Dans le court exemple qui suit, on illustre le mécanisme d'une `Promise`. La méthode `testPromise()` est appelée chaque fois qu'on clique sur l'élément {{HTMLElement("button")}}. Cette méthode crée une promesse qui sera tenue grâce à la fonction {{domxref("window.setTimeout()")}}, et avec la valeur comptePromesse (nombre commançant à 1) après `1s` à `3s` (aléatoire). Le constructeur Promise() est utilisé pour créer la promesse. - -Le fait que la promesse soit tenue est simplement enregistré via un _callback_ sur `p1.then()`. Quelques indicateurs illustrent la manière dont la partie synchrone est découplée de la partie asynchrone. +#### JavaScript ```js 'use strict'; -var comptePromesse = 0; +let comptePromesse = 0; function testPromise() { - var thisComptePromesse = ++comptePromesse; + let thisComptePromesse = ++comptePromesse; - var log = document.getElementById('log'); + let log = document.getElementById('log'); log.insertAdjacentHTML('beforeend', thisComptePromesse + ') Started (<small>Début du code synchrone</small>)<br/>'); // on crée une nouvelle promesse : - var p1 = new Promise( + let p1 = new Promise( // La fonction de résolution est appelée avec la capacité de // tenir ou de rompre la promesse function(resolve, reject) { @@ -164,11 +315,9 @@ function testPromise() { log.insertAdjacentHTML('beforeend', thisComptePromesse + ') Promise made (<small>Fin du code synchrone</small>)<br/>'); } -``` -```js if ("Promise" in window) { - var btn = document.getElementById("btn"); + let btn = document.getElementById("btn"); btn.addEventListener("click", testPromise); } else { log = document.getElementById('log'); @@ -178,26 +327,23 @@ if ("Promise" in window) { L'exemple s'exécute lorsqu'on clique sur le bouton. Pour tester cet exemple, il est nécessaire d'utiliser un navigateur qui supporte les objets `Promise`. En cliquant plusieurs fois sur le bouton en peu de temps, on verra qu'il y a plusieurs promesses tenues les une après les autres. -{{EmbedLiveSample('Exemple_interactif', '500', '200')}} +{{EmbedLiveSample('', '500', '200')}} -## Charger une image en XHR +### Charger une image en XHR -Un autre exemple simple utilisant `Promise` et {{domxref("XMLHttpRequest")}} afin de charger une image est disponible sur le dépôt GitHub MDN [js-examples](https://github.com/mdn/js-examples/tree/master/promises-test). Vous pouvez également [voir le résultat](https://mdn.github.io/js-examples/promises-test/). Chaque étape est commentée afin de vous permettre de suivre l'état de la promesse et l'architecture utilisée avec XHR. +Un autre exemple simple utilisant `Promise` et [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) afin de charger une image est disponible sur le dépôt GitHub MDN [js-examples](https://github.com/mdn/js-examples/tree/master/promises-test). Vous pouvez également [voir le résultat](https://mdn.github.io/js-examples/promises-test/). Chaque étape est commentée afin de vous permettre de suivre l'état de la promesse et l'architecture utilisée avec XHR. ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------- | -| {{SpecName('ES2015', '#sec-promise-objects', 'Promise')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("javascript.builtins.Promise")}} +{{Compat}} ## Voir aussi -- [Manipuler les promesses](/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses) +- [Manipuler les promesses](/fr/docs/Web/JavaScript/Guide/Using_promises) - [Promises/A+ specification](https://promisesaplus.com/) - [Venkatraman.R - JS Promise (Part 1, Basics) ](https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53)(en anglais) - [Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js) ](https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski)(en anglais) diff --git a/files/fr/web/javascript/reference/statements/debugger/index.md b/files/fr/web/javascript/reference/statements/debugger/index.md index 89b0745e47..3001a16cab 100644 --- a/files/fr/web/javascript/reference/statements/debugger/index.md +++ b/files/fr/web/javascript/reference/statements/debugger/index.md @@ -1,12 +1,9 @@ --- title: debugger slug: Web/JavaScript/Reference/Statements/debugger -tags: - - JavaScript - - Reference - - Statement translation_of: Web/JavaScript/Reference/Statements/debugger original_slug: Web/JavaScript/Reference/Instructions/debugger +browser-compat: javascript.statements.debugger --- {{jsSidebar("Statements")}} @@ -14,11 +11,13 @@ L'instruction **`debugger`** permet de faire appel à un outil de débogage (qui ## Syntaxe - debugger; +```js +debugger; +``` ## Exemples -Dans l'exemple qui suit, on utilise un code avec l'instruction `debugger` qui permet de démarrer un débogueur (s'il existe) lorsque la fonction est appelée : +Dans l'exemple qui suit, on utilise un code avec l'instruction `debugger` qui permet de démarrer un débogueur (s'il existe) lorsque la fonction est appelée : ```js function codeProbablementBogue() { @@ -28,24 +27,18 @@ function codeProbablementBogue() { } ``` -Lors que le débogueur est lancé, l'exécution est interrompue au niveau de l'instruction `debugger`. Cela agit comme un point d'arrêt dans le code du script : +Lorsque le débogueur est lancé, l'exécution est interrompue au niveau de l'instruction `debugger`. Cela agit comme un point d'arrêt dans le code du script : -[](<https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png>) +[](screen_shot_2014-02-07_at_9.14.35_am.png) ## Spécifications -| Spécification | Statut | Commentaires | -| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------- | -| {{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-debugger-statement', 'instruction debugger')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-12.15', 'instruction debugger')}} | {{Spec2('ES5.1')}} | Définition initiale | -| {{SpecName('ES3', '#sec-7.5.3', 'instruction debugger')}} | {{Spec2('ES3')}} | | -| {{SpecName('ES1', '#sec-7.4.3', 'instruction debugger')}} | {{Spec2('ES1')}} | Uniquement mentionné comme mot-clé réservé. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("javascript.statements.debugger")}} +{{Compat}} ## Voir aussi -- [Le débogueur des outils de développement Firefox](/fr/docs/Outils/Debugger) +- [Le débogueur des outils de développement Firefox](/fr/docs/Tools/Debugger) |