Comportement entre Callback et Promise

Version imprimable

Bonjour,

Je ne comprends pas pourquoi dans mon code partie CALLBACK la valeur "resolved !" s'affiche avant le "End", étrange !
Par contre, je trouve logique que la partie PROMISE affiche "resolved !" avant le "End".

Pouvez-vous m'expliquer ?

Voici mon code en deux parties la première est la partie CALLBACK et la seconde PROMISE.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//----------------- Start: CALLBACK ------------------------------------
console.log('------------ CALLBACK -------------------')
console.log('Start')
getMember((member) => { console.log(member) })
 
function getMember(next) {
    console.log('calling');
    // setTimeout(() => { next('resolved !') }, 1500)
    for (let index = 0; index < 1000000000; index++) { }
    next('resolved !')
}
console.log('End')
//
// RETURN:
// ------
// Start
// calling
// resolved !
// End
//----------------- End: CALLBACK --------------------------------------

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//----------------- Start: PROMISE -------------------------------------
console.log('------------ PROMISE -------------------')
console.log('Start')
new Promise((resolve, reject) => {
    console.log('calling')
    // setTimeout(() => { resolve('resolved !'), reject(new Error('error during...')) }, 1500)
    for (let index = 0; index < 1000000000; index++) { }
    resolve('resolved !');
})
    .then(message => console.log(message))
    .catch(err => console.log(err.message))
console.log('End')
//
// RETURN:
// ------
// Start
// calling
// End
// resolved !
//----------------- End: PROMISE ---------------------------------------

Merci d'avance,

Yves

07/01/2021, 13h35
NoSmoking
Bonjour,
dans ton exemple « CALLBACK » le traitement est synchrone, classique donc, alors que dans ton exemple « PROMISE. » le traitement est asynchrone ce qui est le propre des promesses.

Ressource :
- Promise sur MDN
07/01/2021, 22h05
vandeyy

Bonjour,

Merci pour ta réponse.

Concernant le Callback, je pensais qu'une fonction (ici getMember) qui a pour argument une fonction anonyme rend cette fonction (getMember) complètement asynchrone et donc avoir le même résultat que les promesses !

J'ai sûrement loupé quelque chose dans ma compréhension !

Peux-tu m'expliquer mon "erreur" ?

Merci beaucoup,

Yves

Citation:

Concernant le Callback, je pensais qu'une fonction (ici getMember) qui a pour argument une fonction anonyme rend cette fonction (getMember) complètement asynchrone et donc avoir le même résultat que les promesses !

:nono: elle se déroule normalement c'est comme si tu avais écrit et lancé
Code:

1 2 3 4 5 6 console.log('------------ CALLBACK -------------------') console.log('Start') console.log('calling'); for (let index = 0; index < 1000000000; index++) { } console.log('resolved !') console.log('End')
la chronologie est respectée.

08/01/2021, 20h32
vandeyy

Je suppose que c'est à cause de l'instruction FOR car cette instruction est bloquante !?

Car je ne vois pas l'intérêt de réaliser des "callback" si c'est pour faire la même chose que le synchrone.

Pourtant, dans beaucoup de tuto, il est expliqué que le fait d'appeler une fonction qui a pour argument une "fonction anonyme" rend la fonction asynchrone et dans mon exemple la fonction reste synchrone !!!

Pas évident quelque chose m'échappe.

Merci.

Citation:

Je suppose que c'est à cause de l'instruction FOR car cette instruction est bloquante !?

La boucle for est bloquante, c'est vrai dans le sens qu'elle va exécuter sans délai. Mais, est-ce les instructions dedans {} sont bloquantes, ce n'est pas nécessaire.

Le problème est que la fonction getMember() lui-même n'est pas asynchrone. Et puis, comme la boucle for est bloquante, on doit trouver un moyen de consommer le temps d'une façon moins bloquante aussi pour que la démontration soit plus aigue et génerique.

On peut intégrer et réalizer ces deux facteurs comme ça.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 //----------------- Start: CALLBACK ------------------------------------ console.log('------------ CALLBACK -------------------') console.log('Start') getMember((member) => { console.log(member) }) function waitFor(ms) { return new Promise(resolve => { setTimeout(() => {resolve()}, ms); }); } async function getMember(next) { console.log('calling'); await waitFor(50); //50 ms next('resolved !') } console.log('End') // // RETURN: // ------ // Start // calling // End // resolved ! //----------------- End: CALLBACK --------------------------------------

10/01/2021, 11h03
NoSmoking

Citation:

Envoyé par vandeyy

Pourtant, dans beaucoup de tuto, il est expliqué que le fait d'appeler une fonction qui a pour argument une "fonction anonyme" rend la fonction asynchrone

je pense que tu as mal interprété le contexte ;)