Comment gérer les opérations asynchrones

Comment gérer les opérations asynchrones

Dans TypeScript, nous disposons de plusieurs façons de gérer les opérations asynchrones : rappels, promesses et async/await. La programmation asynchrone nous permet de gérer des opérations qui pourraient prendre du temps, comme récupérer des données depuis une API, sans bloquer l'exécution d'autres codes.

Rappels

Un rappel est une fonction passée en argument à une autre fonction et est exécutée une fois la tâche terminée. Si les rappels fonctionnent pour des tâches simples, ils peuvent vite devenir illisibles lorsqu’il faut enchaîner des opérations.

type Todo = {
  id: number;
  userId: number;
  title: string;
  completed: boolean;
};
const createPromise = (
  id: number,
  callback: (error: Error | null, task: Todo | null) => void
) => {
  fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
    .then((response) => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("failed to load data");
      }
    })
    .then((data) => {
      callback(null, data);
    })
    .catch((error) => {
      callback(error, null);
    });
};

createPromise(1, (error, task) => {
  if (error) {
    console.error(error);
  } else {
    console.log(task);
  }
});

Promesses

Les promesses offrent une approche plus propre que les rappels en nous permettant de gérer les opérations asynchrones de manière plus linéaire à l'aide des méthodes .then() et .catch(). Ils sont plus faciles à enchaîner mais peuvent quand même devenir compliqués avec des opérations complexes.

const createPromise = (id: number): Promise<object> => {
  return new Promise<object>((resolve, reject) => {
    const data: object = fetch(
      `https://jsonplaceholder.typicode.com/todos/${id}`
    ).then((response) => response.json());
    if (data) {
      resolve(data);
    } else {
      reject("failed to load data");
    }
  });
};

createPromise(1)
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Asynchrone/Attente

Async/await fournit un moyen plus lisible et plus gérable de gérer le code asynchrone par rapport aux promesses et aux rappels. Il nous permet d'écrire du code asynchrone comme s'il était synchrone, en utilisant le mot-clé async pour marquer les fonctions comme asynchrones et attendre de suspendre l'exécution du code jusqu'à ce que la promesse soit résolue. Cette approche offre une lisibilité améliorée et est plus facile à déboguer.

type Todo = {
  id: number;
  userId: number;
  title: string;
  completed: boolean;
};
const getTodo = async (): Promise<Todo> => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await response.json();
  return data;
};

console.log(getTodo());

Pourquoi utiliser Async/Await ?

• Lisibilité améliorée : Async/await est plus lisible et plus facile à suivre, en particulier pour le code complexe avec plusieurs appels asynchrones.
• Gestion des erreurs : cela permet une gestion des erreurs plus simple avec des blocs try/catch, au lieu de plusieurs méthodes .catch().

---

Merci

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!