Maison > interface Web > js tutoriel > le corps du texte

JavaScript la méthode .then / .when.

DDD
Libérer: 2024-10-17 06:27:29
original
628 Les gens l'ont consulté

JavaScript the .then / .when method.

Aujourd'hui, je suivais un tutoriel WordPress et l'instructeur montrait comment effectuer une recherche sur le site à l'aide de jQuery et de JavaScript, en utilisant spécifiquement les méthodes .then() et .when(). En suivant, j’ai réalisé que je n’étais pas aussi familier avec ces méthodes que je le pensais.

J'ai donc fait quelques recherches, pris quelques notes et les ai ajoutées à mon carnet Obsidian. Pour être honnête, les notes sont plutôt grossières : elles ressemblent à quelque chose qu'un élève de cinquième année avec la capacité d'attention d'un écureuil pourrait mettre en place (ce qui, avouons-le, me ressemble parfois !).

Mais je me suis dit, pourquoi ne pas les partager ? S’ils aident ne serait-ce qu’une seule personne, cela vaut la peine d’être publié.


Imaginez ceci :

Vous êtes à l'école, et vous et vos amis vous faites des promesses. Ces promesses reviennent à dire : « Je finirai mes devoirs, et ensuite nous pourrons jouer à des jeux. »

Mais voici le problème : il faut parfois un peu de temps pour terminer les devoirs. Vous pourriez le finir rapidement, ou peut-être que votre chien le mange, et vous ne le finirez jamais (oups !). Les Promesses JavaScript fonctionnent de la même manière. Il attend que quelque chose se passe, puis il dit : « D'accord, et ensuite ? »

Parlons maintenant de .then() :

La méthode .then() ressemble à ce que vous ferez après la promesse est faite. Imaginez que vous disiez à votre ami :

  • « Si je finis mes devoirs, alors nous pourrons jouer à des jeux vidéo ! »

Mais que se passe-t-il si vous ne terminez pas ? Oh-oh, vous pouvez ajouter un plan de sauvegarde :

  • « Si je ne finis pas mes devoirs, alors nous ne jouerons pas aux jeux vidéo. »

Voici comment vous diriez cela en JavaScript :

promiseToFinishHomework
  .then(() => {
    console.log("Yay! We can play games!"); // If you finished
  })
  .catch(() => {
    console.log("Oh no! No games today!"); // If you didn’t finish
  });
Copier après la connexion

Maintenant pour .when() :

C'est comme lorsque vous attendez un groupe de vos amis pour finir leurs devoirs pour que vous puissiez tous jouer ensemble. Vous êtes comme :

  • « Quand nous aurons tous fini, alors nous pourrons jouer ensemble ! »

Dans la vraie vie, ça s’appelle travailler ensemble. En JavaScript, vous utilisez quelque chose appelé Promise.all() (ce qui revient à dire « Attendons que tout le monde soit prêt ! ») :

Promise.all([friend1, friend2]).then(() => {
  console.log("We’re all done! Time to play!");
});
Copier après la connexion

Résumé (super simple) :

  • .then() C'est comme dire "Quand cette chose sera terminée, alors nous ferons quelque chose d'amusant."
  • .when() (ou Promise.all()), c'est comme dire « Quand tout le monde aura fini son travail, alors nous jouerons tous ensemble. »

Ainsi, JavaScript s'assure simplement de savoir ce qui se passe ensuite lorsque les promesses sont tenues ou non ! ?


Alors, comment le sait-il ?

La promesse ne vérifie pas les devoirs par elle-même. Vous le dites ! Lorsque vous créez une promesse, vous décidez si elle est résolue ou rejetée selon que la tâche (comme finir les devoirs) est terminée ou non. Le .then() s'exécute lorsque la promesse est résolue et .catch() s'exécute lorsqu'elle est rejetée.

Exemple avec une action réelle :

Voici un exemple complet pour le voir en action :

let promiseToFinishHomework = new Promise((resolve, reject) => {
  let finishedHomework = true; // Change this to false to see the rejection

  if (finishedHomework) {
    resolve(); // Homework is done!
  } else {
    reject(); // Homework is not done!
  }
});

promiseToFinishHomework
  .then(() => {
    console.log("Yay! We can play games!"); // If the promise resolves (homework done)
  })
  .catch(() => {
    console.log("Oh no! No games today!"); // If the promise rejects (homework not done)
  });

Copier après la connexion

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!