Maison > interface Web > js tutoriel > Programmation asynchrone Rappels, promesses et attente asynchrone

Programmation asynchrone Rappels, promesses et attente asynchrone

WBOY
Libérer: 2024-09-11 06:43:02
original
1095 Les gens l'ont consulté

Asynchronous programming Callbacks, Promises & Async Await

La programmation asynchrone en JavaScript vous permet d'effectuer des tâches telles que passer des appels d'API, lire des fichiers ou interroger des bases de données sans bloquer l'exécution d'autres codes. Ceci est crucial en JavaScript, en particulier dans le développement Web, où la réactivité et les performances sont essentielles.

Concepts clés

1. Rappels :

Une fonction passée en argument à une autre fonction, qui est exécutée après la fin d'une opération asynchrone.

Exemple :

fonction fetchData(callback) {
setTimeout(() => {
callback("Données récupérées");
}, 1000);
>

fetchData((données) => {
console.log(données);
});

2. Promesses :

Un objet représentant l'achèvement ou l'échec éventuel d'une opération asynchrone.

Une promesse peut être dans l'un des trois états suivants : en attente, remplie ou rejetée.

Exemple :

let promise = new Promise((résolvez, rejetez) => {
setTimeout(() => {
solve("Données récupérées");
}, 1000);
});

promesse
.then((data) => console.log(data))
.catch((erreur) => console.log(erreur));

3. asynchrone et attendre :

Les fonctions asynchrones renvoient automatiquement une promesse et sont utilisées pour simplifier la gestion des promesses.

wait suspend l'exécution d'une fonction asynchrone jusqu'à ce que la promesse soit résolue, ce qui rend le code plus facile à lire et à écrire.

Exemple :

Fonction asynchrone fetchData() {
essayez {
let data = attendre une nouvelle promesse ((résoudre, rejeter) => {
setTimeout(() => {
solve("Données récupérées");
}, 1000);
});
console.log(données);
} attraper (erreur) {
console.log(erreur);
>
>

fetchData();

Modèles asynchrones

Callback Hell : situation dans laquelle les rappels sont imbriqués dans d'autres rappels, ce qui rend le code difficile à lire et à maintenir.

Chaînage de promesses : un modèle pour éviter l'enfer des rappels en renvoyant des promesses et en chaînant les méthodes .then() et .catch().

Async/Await : une approche plus moderne et plus propre de l'écriture de code asynchrone, qui évite le chaînage des promesses et rend le code plus synchrone.

Cas d'utilisation

Appels API : récupération de données à partir d'un serveur.

Minuteurs : utilisation de setTimeout ou setInterval.

Opérations sur les fichiers : lecture ou écriture de fichiers de manière non bloquante.

Gestion des événements : gestion des événements tels que les clics, les pressions sur des touches, etc.

La programmation asynchrone en JavaScript est essentielle pour créer des applications réactives et efficaces, en particulier lorsqu'il s'agit d'opérations liées aux E/S.

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal