Existe-t-il une meilleure solution que l'asynchrone utilisant JavaScript ?

Cet article vous parle principalement d'une meilleure solution pour l'expérience JavaScript asynchrone. Les amis qui ont besoin de cet aspect peuvent le suivre pour référence.

1. L'histoire évolutive des solutions asynchrones
Le fonctionnement asynchrone de JavaScript a toujours été un problème gênant, c'est pourquoi les gens continuent de proposer diverses solutions. Cela remonte à la première fonction de rappel (un vieil ami d'ajax), à Promise (pas un nouvel ami), puis au générateur ES6 (un ami puissant).
Nous avons peut-être utilisé un Async.js relativement célèbre il y a quelques années, mais il ne s'est pas débarrassé de la fonction de rappel, et la gestion des erreurs a également suivi la convention du "le premier paramètre de la fonction de rappel est utilisé pour passer le erreur". L'enfer des rappels bien connu était toujours un problème important jusqu'à ce que Generator change ce style asynchrone.
Mais avec l'émergence de l'attente asynchrone d'ES7 (le nouvel ami de Bunker), nous pouvons facilement écrire du code de style synchrone tout en disposant d'un mécanisme asynchrone. Cela peut être considéré comme la solution la plus simple, la plus élégante et la meilleure à l'heure actuelle.

2. syntaxe d'attente asynchrone
La syntaxe d'attente asynchrone est relativement simple et peut être considérée comme du sucre syntaxique pour Generator. Elle est plus sémantique que l'astérisque et le rendement. Ce qui suit est un exemple simple qui affiche hello world après 1 seconde :

function timeout(ms) {
 return new Promise((resolve) => {
  setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value)
}
asyncPrint('hello world', 1000);

await ne peut être utilisé que dans des fonctions asynchrones. S'il est utilisé dans des fonctions ordinaires, une erreur sera signalée. wait est suivi d'un objet A Promise (bien sûr d'autres valeurs sont également possibles, mais elle sera regroupée dans une Promise immédiatement résolue, ce qui n'a aucun sens)

wait attendra que le résultat de la Promesse revienne avant de continuer à exécuter

await waits Bien qu'il s'agisse d'un objet Promise, vous n'avez pas besoin d'écrire .then(), vous pouvez obtenir la valeur de retour directement. Après avoir affiné le code ci-dessus, vous constatez que le. le résultat de la valeur de retour peut également afficher hello world :

3. erreur d'attente asynchrone Traitement

function timeout(ms) {
 return new Promise((resolve) => {
  setTimeout(_ => {resolve('hello world')}, ms);
 });
}
async function asyncPrint(ms) {
 let result = await timeout(ms);
 console.log(result)
}
asyncPrint(1000);

Comme mentionné précédemment, bien que wait attend un objet Promise, il n'est pas nécessaire d'écrire . then(), il n'est donc pas nécessaire d'écrire .catch(). Vous pouvez détecter les erreurs directement avec try catch, ce qui peut éviter les erreurs. Le code de traitement est très redondant et fastidieux, affinons donc l'exemple ci-dessus : <🎜. >

S'il y a plusieurs attentes, elles peuvent être rassemblées dans try catch :

function timeout(ms) {
 return new Promise((resolve, reject) => {
  setTimeout(_ => {reject('error')}, ms);//reject模拟出错，返回error
 });
}
async function asyncPrint(ms) {
 try {
   console.log('start');
   await timeout(ms);//这里返回了错误
   console.log('end');//所以这句代码不会被执行了
 } catch(err) {
   console.log(err); //这里捕捉到错误error
 }
}
asyncPrint(1000);

4. Notes asynchrones sur l'attente

async function main() {
 try {
  const async1 = await firstAsync();
  const async2 = await secondAsync();
  const async3 = await thirdAsync();
 }
 catch (err) {
  console.error(err);
 }
}

1). l'objet Promise derrière la commande wait est susceptible d'entraîner un rejet ou une erreur logique, il est donc préférable de placer wait dans un bloc de code try catch.

2). Pour les opérations asynchrones de plusieurs commandes wait, s'il n'y a pas de dépendance, laissez-les se déclencher en même temps.

Dans le code ci-dessus, si async1 et async2 sont deux opérations asynchrones indépendantes, écrire de cette façon prendra plus de temps, car secondAsync ne sera pas exécuté tant que firstAsync n'est pas terminé. le tout avec élégance Traitement local :

const async1 = await firstAsync();
const async2 = await secondAsync();

3). wait ne peut être utilisé que dans des fonctions asynchrones. S'il est utilisé dans des fonctions ordinaires, une erreur sera signalée :

let [async1, async2] = await Promise.all([firstAsync(), secondAsync()]);

Ajouter async à. la méthode interne forEach C'est tout :

async function main() {
 let docs = [{}, {}, {}];
 //报错 await is only valid in async function
 docs.forEach(function (doc) {
  await post(doc);
  console.log('main');
 });
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

Mais vous constaterez que 3 lignes principales sont sorties en même temps, ce qui signifie que la publication est exécutée simultanément, et non séquentiellement. Le changer en for peut résoudre le problème, 3 principaux sont affichés à 1 seconde d'intervalle :

async function main() {
 let docs = [{}, {}, {}];
 docs.forEach(async function (doc) {
  await post(doc);
  console.log('main');
 });
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

En bref, après avoir utilisé l'attente asynchrone, je me sens rafraîchi et je peux utiliser un code très concis et élégant pour implémenter diverses opérations asynchrones sophistiquées, et dans l'entreprise si le. la logique est complexe, vous n'êtes pas obligé de tomber dans l'enfer des rappels. Je n’ose pas dire que cela doit être la solution ultime, mais c’est bel et bien la solution la plus élégante actuellement !

async function main() {
 let docs = [{}, {}, {}];
 for (let doc of docs) {
  await post(doc);
  console.log('main');
 }
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment intégrer le code zTree dans Angular

outil d'empaquetage de nœuds Pkg (tutoriel détaillé)

Comment utiliser js pour invoquer une application dans WeChat ?

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!