Quelles sont les deux méthodes de traitement asynchrone en JavaScript ?

Deux méthodes de traitement asynchrone en JavaScript : 1. Utilisez "Promise" pour gérer l'asynchrone, ce qui peut aider à gérer le code renvoyé par les méthodes asynchrones ; 2. Utilisez "async/await" pour gérer l'asynchrone, et vous pouvez utiliser la syntaxe synchrone pour l'asynchrone. événements à gérer.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Méthode de traitement asynchrone de JavaScript

Promise

(1) L'objet promise est une spécification et un modèle proposé par le groupe de travail commonJS, dans le but de fournir une interface unifiée pour la programmation asynchrone.

(2) Promise est un modèle. Promise peut aider à gérer le code renvoyé de manière asynchrone. Il encapsule le code et ajoute une couche de gestion similaire à la gestion des événements. Nous pouvons utiliser des promesses pour enregistrer du code qui s'exécutera après le succès ou l'échec de la promesse.

(3) Une fois la promesse terminée, le code correspondant sera également exécuté. Nous pouvons enregistrer n'importe quel nombre de fonctions à exécuter en cas de succès ou d'échec, et nous pouvons enregistrer des gestionnaires d'événements à tout moment.

(4) La promesse a deux états : 1. En attente (en attente) 2. Terminé (réglé) ;

La promesse restera dans un état d'attente jusqu'à ce que l'appel asynchrone qu'elle enveloppe revienne/expire/se termine.

(5) À ce moment, le statut de la promesse devient terminé. L'état d'achèvement est divisé en deux catégories : 1. Résolu 2. Rejeté ;

(6) promesse résolue (résolue) : signifie qu'elle se termine avec succès. Promesse rejetée (rejetée) signifie qu'elle ne s'est pas terminée avec succès.

//promise
var p=new Promise(function(resolved))
//在这里进行处理。也许可以使用ajax
setTimeout(function(){
   var result=10*5;
   if(result===50){
      resolve(50);
   }else{
     reject(new Error('Bad Math'));
  }
},1000);
});
p.then(function(result){
    console.log('Resolve with a values of %d',result);
});
p.catch(function(){
   console.error('Something went wrong');
});

(1) La clé du code réside dans l'appel à setTimeout().

(2) L'important est qu'il ait appelé les fonctions solve() et rejet(). La fonction solve() indique à l'utilisateur de la promesse que la promesse a été résolue ; la fonction rejet() indique à l'utilisateur de la promesse que la promesse n'a pas abouti.

(3) Il existe également des codes qui utilisent la promesse. Faites attention à l'utilisation de then et catch. Vous pouvez les considérer comme des gestionnaires d'événements de réussite et d'échec.

(4) Ce qui est intelligent, c'est que nous séparons le traitement des promesses de l'état. En d’autres termes, on peut appeler p.then (ou p.catch) autant de fois que l’on veut, quel que soit l’état de la promesse.

(5) Promise est le moyen standard d'ECMAscript 6 de gérer le code asynchrone. Les bibliothèques JavaScript utilisent des promesses pour gérer l'ajax, les animations et d'autres interactions asynchrones typiques.

En termes simples, l'idée est la suivante : chaque tâche asynchrone renvoie un objet de promesse, qui possède une méthode then qui permet de spécifier une fonction de rappel. Par exemple, la fonction de rappel f2 de f1 peut être écrite comme suit :

f1.then(f2);

f1 doit être réécrite comme suit (implémenté en utilisant jquery) :

function f1(){
   var dfd=$.deferred();
   settimeout(function(){
     //f1的任务代码
     dfd.resolve();
　 },500);
  return dfd.promise;  
}

Les avantages d'écrire comme ceci : la fonction de rappel est écrite dans un style de chaîne, et le flux du programme est clairement visible et il existe un ensemble complet de méthodes de support qui peuvent réaliser de nombreuses fonctions puissantes.

Par exemple, spécifiez plusieurs fonctions de rappel

f1().then(f2).then(f3);

Un autre exemple, spécifiez la fonction de rappel lorsqu'une erreur se produit :

f1().then(f2).fail(f3);

Et elle présente un avantage que les trois méthodes précédentes n'ont pas : si une tâche est terminée, ajoutez une fonction de rappel, la fonction de rappel sera exécutée immédiatement.

Vous n'avez donc pas à craindre de manquer un événement ou un signal.

Inconvénients de cette méthode : Elle est relativement difficile à écrire et à comprendre.

async wait

Depuis l'avènement d'ES6 Promise, le code asynchrone est progressivement passé de l'enfer des rappels à un élégant traitement de pipeline fonctionnel, mais pour les développeurs qui ne le connaissent pas, ce n'est qu'un changement de l'enfer des rappels. C'est juste une promesse d'enfer.

Le nouveau async/await est standardisé dans ES8. Bien qu'il ne s'agisse que d'un sucre de syntaxe pour combiner Promise et Generator Function, il est transmis via async /<code>await peut utiliser une syntaxe synchrone pour gérer les événements asynchrones, tout comme un vieil arbre qui fleurit de nouvelles fleurs. Le style d'écriture est complètement différent de Promise : async/await，虽然只是 Promise 和 Generator Function组合在一起的语法糖，但通过 async/await 便可以将异步事件用同步语法来处理，就好像是老树开新花一样，写起来的风格与 Promise 完全不同：

function wait(time, fn) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('wait:', time)
      resolve(fn ? fn() : time)
    }, time)
  })
}
await wait(500, () => console.log('bar'))
console.log('foo')
// wait: 500
// bar
// foo

通过把 setTimeout 包装成 Promise，再用 await 关键字调用，可以看到结果会是同步执行的先出现 bar，再出现 foo，也就是开头提到的将异步事件写成同步处理。

再看一个例子：

async function withAsyncAwait() {
  for(let i = 0; i 3402058288807f50677058ab1f5894f3 console.log(i))
  }
}await withAsyncAwait()
// wait: 0
// 0
// wait: 500
// 1
// wait: 1000
// 2
// wait: 1500
// 3
// wait: 2000
// 4

代码中实现了withAsyncAwait 函数，用 for 循环及 await 关键字反复执行 wait 函数；此处执行时，循环每次会按顺序等待不同的秒数再执行下一次循环。

在使用 async/await 时，由于 await 关键字只能在 async function 中执行，使用时务必要记得要同时使用。

另外在用循环处理异步事件时，需要注意在 ES6 之后提供的很多 Array 方法都不支持 async/await 语法，如果这里用 forEach 取代 forrrreee

En utilisant setTimeout code>. est empaqueté dans une promesse, puis appelé à l'aide du mot-clé <code>await. Vous pouvez voir que le résultat sera une exécution synchrone. bar apparaîtra en premier, puis foo. apparaîtra, c'est-à-dire l'écriture des événements asynchrones dans le traitement synchrone mentionné au début.

Regardez un autre exemple : rrreeeLa fonction withAsyncAwait est implémentée dans le code, et la boucle for et le mot-clé await sont utilisés pour exécuter à plusieurs reprises la fonction wait ; lorsqu'elle est exécutée ici, la boucle attendra un nombre différent de secondes dans l'ordre avant d'exécuter la boucle suivante.

Lorsque vous utilisez async/await, puisque le mot-clé await ne peut être exécuté qu'en fonction asynchrone, n'oubliez pas de l'utiliser au moment du démarrage. en même temps. 🎜🎜De plus, lorsque vous utilisez des boucles pour traiter des événements asynchrones, vous devez noter que de nombreuses méthodes Array fournies après ES6 ne prennent pas en charge la syntaxe async/await si vous utilisez. forEach ici remplace for, le résultat deviendra une exécution synchrone et les nombres seront imprimés toutes les 0,5 secondes : 🎜🎜[Recommandations associées : 🎜Tutoriel d'apprentissage javascript🎜🎜]🎜 🎜

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!