Rappels, Callback Hell, Promesses, Async/Await

« Le codage peut parfois ressembler à un film à suspense - plein de rebondissements inattendus. Mais et si vous pouviez rendre votre code aussi fluide qu’une scène bien dirigée ? Bienvenue dans le monde des rappels, des promesses et des asynchrones/attentes ! 

1. Rappel

Un rappel est une fonction que vous transmettez en argument à une autre fonction, qui est ensuite exécutée une fois cette fonction terminée. Pensez-y comme ceci : vous commandez un billet de cinéma en ligne et vous leur dites de vous envoyer un e-mail (la fonction de rappel) lorsque le billet est prêt.

Exemple :
Imaginez que vous commandez un billet pour le film "Spider-Man 4" en ligne :

function orderTicket(movie, callback) {
    console.log(`Ordering ticket for ${movie}...`);
    // Simulate a delay with setTimeout
    setTimeout(() => {
        console.log('Ticket ordered successfully!');
        callback();  // Notify when the ticket is ready
    }, 2000);
}

function notifyUser() {
    console.log('Your ticket is ready! Enjoy the movie!');
}

orderTicket('Spider-Man 4', notifyUser);

Sortie :

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Your ticket is ready! Enjoy the movie!

Ici, notifyUser est la fonction de rappel qui est appelée après la commande du ticket.

2. L'enfer de rappel

L'

L'enfer des rappels se produit lorsque plusieurs rappels sont imbriqués les uns dans les autres, ce qui rend le code difficile à lire et à maintenir. Cela ressemble à une pyramide ou à un escalier, et il est difficile de suivre ce qui se passe.

Exemple :
Imaginez maintenant que vous vouliez faire plusieurs choses, comme commander des billets, acheter du pop-corn et trouver votre place, le tout dans l'ordre :

function orderTicket(movie, callback) {
    console.log(`Ordering ticket for ${movie}...`);
    setTimeout(() => {
        console.log('Ticket ordered successfully!');
        callback();
    }, 2000);
}

function getPopcorn(callback) {
    console.log('Getting popcorn...');
    setTimeout(() => {
        console.log('Popcorn ready!');
        callback();
    }, 1000);
}

function findSeat(callback) {
    console.log('Finding your seat...');
    setTimeout(() => {
        console.log('Seat found!');
        callback();
    }, 1500);
}

orderTicket('Spider-Man 4', function() {
    getPopcorn(function() {
        findSeat(function() {
            console.log('All set! Enjoy the movie!');
        });
    });
});

Sortie :

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

C'est l'enfer des rappels : vous pouvez voir comment le code devient plus imbriqué et plus difficile à lire.

3. Promesse

Une promesse est un objet qui représente l'achèvement (ou l'échec) éventuel d'une opération asynchrone. Il vous permet d'écrire du code plus propre et de gérer plus facilement les tâches asynchrones sans tomber dans l'enfer des rappels.

Exemple :
Simplifions l'exemple ci-dessus en utilisant des promesses

function orderTicket(movie) {
    return new Promise((resolve) => {
        console.log(`Ordering ticket for ${movie}...`);
        setTimeout(() => {
            console.log('Ticket ordered successfully!');
            resolve();
        }, 2000);
    });
}

function getPopcorn() {
    return new Promise((resolve) => {
        console.log('Getting popcorn...');
        setTimeout(() => {
            console.log('Popcorn ready!');
            resolve();
        }, 1000);
    });
}

function findSeat() {
    return new Promise((resolve) => {
        console.log('Finding your seat...');
        setTimeout(() => {
            console.log('Seat found!');
            resolve();
        }, 1500);
    });
}

orderTicket('Spider-Man 4')
    .then(getPopcorn)
    .then(findSeat)
    .then(() => {
        console.log('All set! Enjoy the movie!');
    });

Sortie :

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

Les promesses rendent le code plus facile à lire en chaînant les méthodes .then(), évitant ainsi le problème d'imbrication.

4. Async/Attendre

Async/await est une syntaxe moderne qui vous permet d'écrire du code asynchrone qui ressemble et se comporte comme du code synchrone. Il repose sur des promesses et rend le code encore plus propre et plus facile à comprendre.

Exemple :
Utilisons async/await pour gérer le même scénario

function orderTicket(movie) {
    return new Promise((resolve) => {
        console.log(`Ordering ticket for ${movie}...`);
        setTimeout(() => {
            console.log('Ticket ordered successfully!');
            resolve();
        }, 2000);
    });
}

function getPopcorn() {
    return new Promise((resolve) => {
        console.log('Getting popcorn...');
        setTimeout(() => {
            console.log('Popcorn ready!');
            resolve();
        }, 1000);
    });
}

function findSeat() {
    return new Promise((resolve) => {
        console.log('Finding your seat...');
        setTimeout(() => {
            console.log('Seat found!');
            resolve();
        }, 1500);
    });
}

async function watchMovie() {
    await orderTicket('Spider-Man 4');
    await getPopcorn();
    await findSeat();
    console.log('All set! Enjoy the movie!');
}

watchMovie();

Sortie :

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

Avec async/await, le code est plus simple, ressemblant à la façon dont vous décririez le processus dans la vraie vie. Le mot clé wait suspend l'exécution jusqu'à ce que la promesse soit résolue, ce qui rend le flux d'actions facile à suivre.

Résumé :

• Callback : Une fonction exécutée après qu'une autre fonction ait terminé son travail.
• Callback Hell : Rappels imbriqués menant à un code difficile à lire.
• Promesse : Une façon plus propre de gérer les tâches asynchrones, en évitant l'enfer des rappels.
• Async/Await : Une syntaxe moderne et facile à lire basée sur des promesses de gestion du code asynchrone.

"En maîtrisant les rappels, les promesses et l'async/wait, vous pouvez transformer un code complexe en une expérience transparente. Dites adieu à l'enfer des rappels et bonjour à un JavaScript plus propre et plus efficace. Bon codage !"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!