Mon parcours React : jour 9

Ce que j'ai appris aujourd'hui :

1. JavaScript asynchrone :

Définition : La programmation asynchrone permet à JavaScript d'effectuer des tâches sans attendre la fin d'une tâche précédente.
Cas d'utilisation : effectuer des appels API ou d'autres opérations fastidieuses.
Avantage : améliore l'efficacité en permettant à d'autres tâches de s'exécuter en attendant une réponse.

1. Rappels :

• Définition : Un rappel est une fonction passée en argument à une autre fonction, exécutée ultérieurement lorsque cela est nécessaire.
• Défi : les rappels imbriqués créent un enfer de rappel, rendant le code difficile à lire et à maintenir.
• Solution : des promesses ont été introduites pour simplifier la gestion asynchrone.

1. Promesses :
2. Définition : les promesses gèrent les opérations asynchrones plus proprement et évitent l'enfer des rappels.

• États de promesses :
  En attente : état initial, en attente du résultat.
  Résolu : L'opération est réussie.
  Rejeté : l'opération a échoué.

• Méthodes :

.then() : s'exécute lorsque la promesse est résolue.
.catch() : s'exécute lorsque la promesse est rejetée.
.finally() : s'exécute, que la promesse soit résolue ou rejetée.

Exemple de promesses

const fetchData = () => {
    return new Promise((resolve, reject) => {
        let success = true; // Simulating success or failure
        setTimeout(() => {
            success ? resolve("Data fetched!") : reject("Failed to fetch data.");
        }, 2000);
    });
};

fetchData()
    .then((data) => console.log(data)) // Output: Data fetched!
    .catch((error) => console.error(error))
    .finally(() => console.log("Operation completed."));

1. Async/Attendre

• Objectif : construit sur des promesses pour un code plus propre et plus lisible.
• Fonction asynchrone : déclare une fonction qui gérera les opérations asynchrones.
• Attendre le mot clé : suspend l'exécution de la fonction jusqu'à ce que la promesse soit résolue ou rejetée.

Exemple d'Async/Await :

const fetchDataAsync = async () => {
    try {
        const data = await fetchData(); // Wait for the promise to resolve
        console.log(data);             // Output: Data fetched!
    } catch (error) {
        console.error(error);
    } finally {
        console.log("Operation completed.");
    }
};

fetchDataAsync();

5.Analogie réelle :

• Promesses : En attente : commandez une pizza en ligne et attendez la livraison. Résolu : la pizza arrive. Vous appréciez votre repas. Rejeté : la pizza n'arrive pas. Vous vous plaignez.
• Async/Await : Vous continuez à lire un livre en attendant l'arrivée de la pizza.

6.Promesse.tout

• Objectif : exécuter plusieurs promesses simultanément et attendre que toutes soient terminées. Exemple:

const promise1 = Promise.resolve("Task 1 completed");
const promise2 = Promise.resolve("Task 2 completed");

Promise.all([promise1, promise2])
    .then((results) => console.log(results)) // Output: ["Task 1 completed", "Task 2 completed"]
    .catch((error) => console.error(error));

1. Async/Await avec l'API Fetch

• Récupérer : une manière moderne de faire des requêtes HTTP en JavaScript. Exemple:

const fetchDataFromAPI = async () => {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data:", error);
    }
};

fetchDataFromAPI();

Faits saillants

• Les promesses nettoient les opérations asynchrones et améliorent la gestion des erreurs.
• Async/Await rend le code plus facile à écrire et à comprendre, en particulier pour les promesses chaînées.
• Promise.all est utile pour exécuter plusieurs tâches asynchrones en parallèle.

Jusqu'à présent, ça a été une belle balade.

Jour 10 avec le feu

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!