You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/11-async/01-callbacks/article.md
+69-69Lines changed: 69 additions & 69 deletions
Original file line number
Diff line number
Diff line change
@@ -2,67 +2,67 @@
2
2
3
3
# Introduction: callbacks
4
4
5
-
```warn header="We use browser methods in examples here"
6
-
To demonstrate the use of callbacks, promises and other abstract concepts, we'll be using some browser methods: specifically, loading scripts and performing simple document manipulations.
5
+
```warn header="Nous utilisons ici des méthodes du navigateur dans les exemples"
6
+
Pour démontrer l'utilisation des callbacks, des promesses et d'autres concepts abstraits, nous utiliserons certaines méthodes du navigateur : plus précisément, nous chargerons des scripts et effectuerons des manipulations simples de documents.
7
7
8
-
If you're not familiar with these methods, and their usage in the examples is confusing, you may want to read a few chapters from the [next part](/document) of the tutorial.
8
+
Si vous n'êtes pas familier avec ces méthodes, et que leur utilisation dans les exemples est confuse, vous pouvez lire quelques chapitres de la [partie suivante](/document) du tutoriel.
9
9
10
-
Although, we'll try to make things clear anyway. There won't be anything really complex browser-wise.
10
+
Mais nous allons quand même essayer de rendre les choses claires. Il n'y aura rien de vraiment complexe au niveau du navigateur.
11
11
```
12
12
13
-
Many functions are provided by JavaScript host environments that allow you to schedule *asynchronous* actions. In other words, actions that we initiate now, but they finish later.
13
+
De nombreuses fonctions sont fournies par les environnements hôtes JavaScript qui vous permettent de planifier des actions *asynchrones*. En d'autres termes, des actions que nous lançons maintenant, mais qui se terminent plus tard.
14
14
15
-
For instance, one such function is the `setTimeout` function.
15
+
Par exemple, une de ces fonctions est la fonction `setTimeout`.
16
16
17
-
There are other real-world examples of asynchronous actions, e.g. loading scripts and modules (we'll cover them in later chapters).
17
+
Il existe d'autres exemples concrets d'actions asynchrones, par exemple le chargement de scripts et de modules (nous les aborderons dans les chapitres suivants).
18
18
19
-
Take a look at the function `loadScript(src)`, that loads a script with the given `src`:
19
+
Regardez la fonction `loadScript(src)`, qui charge un script avec le `src` donné:
20
20
21
21
```js
22
22
functionloadScript(src) {
23
-
//creates a <script> tag and append it to the page
24
-
//this causes the script with given src to start loading and run when complete
23
+
//crée une balise <script> et l'ajoute à la page
24
+
//ceci fait que le script avec la src donnée commence à se charger et s'exécute une fois terminé.
25
25
let script =document.createElement('script');
26
26
script.src= src;
27
27
document.head.append(script);
28
28
}
29
29
```
30
30
31
-
It inserts into the document a new, dynamically created, tag `<script src="https://github.com/%3Cspan%20class="x x-first x-last">…">`with the given `src`. The browser automatically starts loading it and executes when complete.
31
+
Il insère dans le document une nouvelle balise, créée dynamiquement, `<script src="https://github.com/%3Cspan%20class="x x-first x-last">...">`avec le `src` donné. Le navigateur commence automatiquement à la charger et l'exécute lorsqu'elle est terminée.
32
32
33
-
We can use this function like this:
33
+
Nous pouvons utiliser cette fonction comme suit :
34
34
35
35
```js
36
-
//load and execute the script at the given path
36
+
//charger et exécuter le script au chemin donné
37
37
loadScript('/my/script.js');
38
38
```
39
39
40
-
The script is executed "asynchronously", as it starts loading now, but runs later, when the function has already finished.
40
+
Le script est exécuté de manière "asynchrone", car il commence à se charger maintenant, mais s'exécute plus tard, lorsque la fonction est déjà terminée.
41
41
42
-
If there's any code below`loadScript(…)`, it doesn't wait until the script loading finishes.
42
+
S'il y a du code sous`loadScript(...)`, il n'attend pas que le chargement du script soit terminé.
43
43
44
44
```js
45
45
loadScript('/my/script.js');
46
-
//the code below loadScript
47
-
//doesn't wait for the script loading to finish
46
+
//le code dessous loadScript
47
+
//n'attend pas que le chargement du script soit terminé
48
48
// ...
49
49
```
50
50
51
-
Let's say we need to use the new script as soon as it loads. It declares new functions, and we want to run them.
51
+
Disons que nous devons utiliser le nouveau script dès qu'il est chargé. Il déclare de nouvelles fonctions, et nous voulons les exécuter.
52
52
53
-
But if we do that immediately after the`loadScript(…)` call, that wouldn't work:
53
+
Mais si nous le faisons immédiatement après l'appel`loadScript(...)`, cela ne fonctionnera pas:
54
54
55
55
```js
56
-
loadScript('/my/script.js'); //the script has "function newFunction() {…}"
56
+
loadScript('/my/script.js'); //le script a "function newFunction() {…}"
57
57
58
58
*!*
59
-
newFunction(); //no such function!
59
+
newFunction(); //aucune fonction de ce type!
60
60
*/!*
61
61
```
62
62
63
-
Naturally, the browser probably didn't have time to load the script. As of now, the `loadScript`function doesn't provide a way to track the load completion. The script loads and eventually runs, that's all. But we'd like to know when it happens, to use new functions and variables from that script.
63
+
Naturellement, le navigateur n'a probablement pas eu le temps de charger le script. Pour l'instant, la fonction `loadScript`ne permet pas de suivre l'achèvement du chargement. Le script se charge et finit par s'exécuter, c'est tout. Mais nous aimerions savoir quand cela se produit, pour utiliser les nouvelles fonctions et variables de ce script.
64
64
65
-
Let's add a`callback`function as a second argument to`loadScript`that should execute when the script loads:
65
+
Ajoutons une fonction`callback`comme second argument à`loadScript`qui doit s'exécuter lorsque le script se charge :
66
66
67
67
```js
68
68
functionloadScript(src, *!*callback*/!*) {
@@ -77,19 +77,19 @@ function loadScript(src, *!*callback*/!*) {
77
77
}
78
78
```
79
79
80
-
Now if we want to call new functions from the script, we should write that in the callback:
80
+
Maintenant, si nous voulons appeler de nouvelles fonctions depuis le script, nous devons l'écrire dans le callback:
81
81
82
82
```js
83
83
loadScript('/my/script.js', function() {
84
-
//the callback runs after the script is loaded
85
-
newFunction(); //so now it works
84
+
//le callback est exécuté après le chargement du script
85
+
newFunction(); //maintenant cela fonctionne
86
86
...
87
87
});
88
88
```
89
89
90
-
That's the idea: the second argument is a function (usually anonymous) that runs when the action is completed.
90
+
C'est l'idée: le deuxième argument est une fonction (généralement anonyme) qui s'exécute lorsque l'action est terminée.
91
91
92
-
Here's a runnable example with a real script:
92
+
Voici un exemple exécutable avec un vrai script:
93
93
94
94
```js run
95
95
functionloadScript(src, callback) {
@@ -102,20 +102,20 @@ function loadScript(src, callback) {
alert(`Cool, the script ${script.src} is loaded`);
105
-
alert( _ ); //function declared in the loaded script
105
+
alert( _ ); //fonction déclarée dans le script chargé
106
106
});
107
107
*/!*
108
108
```
109
109
110
-
That's called a "callback-based" style of asynchronous programming. A function that does something asynchronously should provide a `callback`argument where we put the function to run after it's complete.
110
+
C'est ce qu'on appelle un style de programmation asynchrone basé sur les "callbacks". Une fonction qui fait quelque chose de manière asynchrone doit fournir un argument `callback`où nous mettons la fonction à exécuter après qu'elle soit terminée.
111
111
112
-
Here we did it in`loadScript`, but of course it's a general approach.
112
+
Ici nous l'avons fait dans`loadScript`, mais bien sûr c'est une approche générale.
113
113
114
-
## Callback in callback
114
+
## Callback imbriqué
115
115
116
-
How can we load two scripts sequentially: the first one, and then the second one after it?
116
+
Comment charger deux scripts de manière séquentielle: le premier, puis le second après lui ?
117
117
118
-
The natural solution would be to put the second `loadScript`call inside the callback, like this:
118
+
La solution naturelle serait de placer le second appel `loadScript`à l'intérieur du callback, comme ceci:
So, every new action is inside a callback. That's fine for few actions, but not good for many, so we'll see other variants soon.
154
+
Ainsi, chaque nouvelle action se trouve dans une callback. C'est bien pour peu d'actions, mais pas pour beaucoup, donc nous verrons bientôt d'autres variantes.
155
155
156
-
## Handling errors
156
+
## Gestion des erreurs
157
157
158
-
In the above examples we didn't consider errors. What if the script loading fails? Our callback should be able to react on that.
158
+
Dans les exemples ci-dessus, nous n'avons pas tenu compte des erreurs. Que se passe-t-il si le chargement du script échoue ? Notre callback doit être capable de réagir à cette situation.
159
159
160
-
Here's an improved version of `loadScript`that tracks loading errors:
160
+
Voici une version améliorée de `loadScript`qui suit les erreurs de chargement :
161
161
162
162
```js
163
163
functionloadScript(src, callback) {
@@ -173,32 +173,32 @@ function loadScript(src, callback) {
173
173
}
174
174
```
175
175
176
-
It calls`callback(null, script)`for successful load and `callback(error)`otherwise.
176
+
Il appelle`callback(null, script)`en cas de chargement réussi et `callback(error)`dans le cas contraire.
Once again, the recipe that we used for `loadScript`is actually quite common. It's called the "error-first callback" style.
189
+
Une fois encore, la recette que nous avons utilisée pour `loadScript`est en fait assez commune. C'est le style "error-first callback".
190
190
191
-
The convention is:
192
-
1.The first argument of the`callback`is reserved for an error if it occurs. Then`callback(err)`is called.
193
-
2.The second argument (and the next ones if needed) are for the successful result. Then`callback(null, result1, result2…)`is called.
191
+
La convention est:
192
+
1.Le premier argument de la`callback`est réservé pour une erreur si elle se produit. Ensuite,`callback(err)`est appelé.
193
+
2.Le deuxième argument (et les suivants si nécessaire) sont pour le résultat réussi. Ensuite,`callback(null, result1, result2...)`est appelé.
194
194
195
-
So the single `callback`function is used both for reporting errors and passing back results.
195
+
Ainsi, la fonction unique `callback`est utilisée à la fois pour signaler les erreurs et pour renvoyer les résultats.
196
196
197
-
## Pyramid of Doom
197
+
## Pyramide du malheur
198
198
199
-
From the first look, it's a viable way of asynchronous coding. And indeed it is. For one or maybe two nested calls it looks fine.
199
+
À première vue, il s'agit d'un moyen viable de codage asynchrone. Et c'est effectivement le cas. Pour un ou peut-être deux appels imbriqués, cela semble correct.
200
200
201
-
But for multiple asynchronous actions that follow one after another we'll have code like this:
201
+
Mais pour de multiples actions asynchrones qui se succèdent, nous aurons un code comme celui-ci:
3.We load`3.js`, then if there's no error -- do something else`(*)`.
231
+
Dans le code ci-dessus:
232
+
1.Nous chargeons`1.js`, puis s'il n'y a pas d'erreur.
233
+
2.Nous chargeons`2.js`, puis s'il n'y a pas d'erreur.
234
+
3.Nous chargeons`3.js`, puis s'il n'y a pas d'erreur -- fait autre chose`(*)`.
235
235
236
-
As calls become more nested, the code becomes deeper and increasingly more difficult to manage, especially if we have real code instead of `...`that may include more loops, conditional statements and so on.
236
+
Au fur et à mesure que les appels deviennent plus imbriqués, le code devient plus profond et de plus en plus difficile à gérer, surtout si nous avons du vrai code au lieu de `...`qui peut inclure plus de boucles, des déclarations conditionnelles et ainsi de suite.
237
237
238
-
That's sometimes called "callback hell" or "pyramid of doom."
238
+
C'est ce qu'on appelle parfois "l'enfer du rappel" ou "la pyramide du malheur".
The "pyramid" of nested calls grows to the right with every asynchronous action. Soon it spirals out of control.
266
+
La "pyramide" d'appels imbriqués croît vers la droite à chaque action asynchrone. Bientôt, elle devient incontrôlable.
267
267
268
-
So this way of coding isn't very good.
268
+
Donc cette façon de coder n'est pas très bonne.
269
269
270
-
We can try to alleviate the problem by making every action a standalone function, like this:
270
+
Nous pouvons essayer d'atténuer le problème en faisant de chaque action une fonction autonome, comme ceci:
271
271
272
272
```js
273
273
loadScript('1.js', step1);
@@ -294,17 +294,17 @@ function step3(error, script) {
294
294
if (error) {
295
295
handleError(error);
296
296
} else {
297
-
// ...continue after all scripts are loaded (*)
297
+
// ...continue après que tous les scripts soient chargés (*)
298
298
}
299
299
}
300
300
```
301
301
302
-
See? It does the same, and there's no deep nesting now because we made every action a separate top-level function.
302
+
Vous voyez ? Il fait la même chose, et il n'y a pas d'imbrication profonde maintenant parce que nous avons fait de chaque action une fonction séparée de haut niveau.
303
303
304
-
It works, but the code looks like a torn apart spreadsheet. It's difficult to read, and you probably noticed that one needs to eye-jump between pieces while reading it. That's inconvenient, especially if the reader is not familiar with the code and doesn't know where to eye-jump.
304
+
Cela fonctionne, mais le code ressemble à une feuille de calcul déchirée. Il est difficile à lire, et vous avez probablement remarqué qu'il faut passer d'un morceau à l'autre en le lisant. Ce n'est pas pratique, surtout si le lecteur n'est pas familier avec le code et ne sait pas où sauter du regard.
305
305
306
-
Also, the functions named`step*`are all of single use, they are created only to avoid the "pyramid of doom." No one is going to reuse them outside of the action chain. So there's a bit of namespace cluttering here.
306
+
De plus, les fonctions nommées`step*`sont toutes à usage unique, elles sont créées uniquement pour éviter la "pyramide du malheur". Personne ne va les réutiliser en dehors de la chaîne d'action. Il y a donc un peu d'encombrement de l'espace de noms ici.
307
307
308
-
We'd like to have something better.
308
+
Nous aimerions avoir quelque chose de mieux.
309
309
310
-
Luckily, there are other ways to avoid such pyramids. One of the best ways is to use "promises," described in the next chapter.
310
+
Heureusement, il existe d'autres moyens d'éviter de telles pyramides. L'un des meilleurs moyens est d'utiliser des "promesses", décrites dans le chapitre suivant.
0 commit comments