Maison  >  Article  >  interface Web  >  Comment utiliser async et wait pour effectuer un traitement asynchrone en JavaScript

Comment utiliser async et wait pour effectuer un traitement asynchrone en JavaScript

不言
不言original
2019-01-10 16:47:152479parcourir

Async/await est une fonction principale qui peut décrire le traitement asynchrone de Promise de manière plus concise et efficace. Le traitement asynchrone est un mécanisme qui peut exécuter le traitement suivant immédiatement sans attendre le résultat du traitement. Il peut être facilement implémenté en utilisant Promise. .

Comment utiliser async et wait pour effectuer un traitement asynchrone en JavaScript

Dans le cas de Promise, nous utilisons "then" pour nous connecter, cela devient donc un code très monotone.

Par exemple, si vous utilisez « then » pour exécuter plusieurs processus Promise, cela ressemblerait à ceci :

getDate()
.then(function(data) {
    return getYear(data)
}) .then(function(year) {
    return getSomething(year)
}) .then(function(item) {
    getAnotherThing(item)
})

Dans certains cas, il peut être préférable d'utiliser Promise.all( ) implémentation, mais vous devez quand même l'utiliser.

Si nous apprenons à utiliser async/await, nous pouvons améliorer l'efficacité.

Comment utiliser async/await ?

Jetons d'abord un coup d'œil à la syntaxe de base

async peut définir une fonction et l'écrire simplement avant la fonction pour effectuer un traitement asynchrone.

async function() { }

Si vous écrivez de manière asynchrone comme ceci, cette fonction renverra Promise.

De plus, wait est un opérateur qui s'arrête temporairement avant que le résultat du traitement Promise ne soit renvoyé.

await Promise处理

En écrivant simplement wait avant la fonction décrivant la gestion de la promesse, elle fera une pause jusqu'à ce que le résultat soit renvoyé.

Cependant, veuillez noter que wait ne peut être utilisé que pour les fonctions définies en async !

Pour cette raison, async / wait sont souvent utilisés par paires.

Comment écrire un traitement asynchrone en utilisant async/await ?

Tout d’abord, supposons le traitement de la promesse suivant.

function myPromise(num) {
  return new Promise(function(resolve) {
 
    setTimeout(function() { resolve(num * num) }, 3000)
 
  })
}

Dans cet exemple, il est clair que le traitement qui prend volontairement 3 secondes est enregistré dans la Promesse.

Si vous utilisez async/await sans, cela ressemblera à ceci.

async function myAsync() {
    var result = await myPromise(10);
    console.log(result);
}

Le résultat de l'exécution est : 100

Dans cet exemple, une fonction de traitement asynchrone est créée en attribuant async.

Décrivez le traitement Promise dans la fonction est en attente avant myPromise()

Cela attendra temporairement le processus Promise, qui renverra le résultat après 3 secondes, et une fois le résultat obtenu, le traitement se poursuivra.

Dans le résultat de l'exécution, la valeur 100 multipliée par le paramètre donné 10 peut être obtenue.

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!

Déclaration:
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