Fonction Async sans attendre en Javascript

J'ai deux fonctions a et b qui sont asynchrones, l'ancien sans await et, plus tard, avec await. Ils ont tous les deux journaux de quelque chose de la console et de retour undefined. Après l'appel, soit de la fonction que j'journal d'un autre message et regarde si le message est écrit avant ou après l'exécution du corps de la fonction.

JS:

function someMath() {
  for (let i = 0; i < 3000000; i++) { Math.sqrt(i**5) }
}

function timeout(n) {
   return new Promise(cb => setTimeout(cb, n))
}

//------------------------------------------------- a (no await)
async function a() {
  someMath()
  console.log('in a (no await)')
}

//---------------------------------------------------- b (await)
async function b() {
  await timeout(100)
  console.log('in b (await)')
}

clear.onclick = console.clear

aButton.onclick = function() {
  a()
  console.log('after a (no await) call')
}

bButton.onclick = function() {
  b()
  console.log('after b (await) call')
}

HTML:

<button id="aButton">test without await</button>
<button id="bButton">test with await</button>
<button id="clear">clear console</button>

Si vous lancez le test sans await la fonction semble fonctionner comme si c'était synchrone. Mais avec await, les messages sont inversé que la fonction est exécutée de manière asynchrone.

Donc ma question est: comment exécuter javascript async fonctions lorsqu'aucune await mot-clé est présent?

Réel de cas d'utilisation: j'ai un await mot-clé qui est conditionnellement exécuté, et j'ai besoin de savoir si la fonction est exécutée de manière synchrone ou non afin de rendre mon élément:

async function initializeComponent(stuff) {
   if (stuff === undefined)
      stuff = await getStuff()
   //initialize

   if (/* context has been blocked */)
       renderComponent() //render again if stuff had to be loaded
}

initializeComponent()
renderComponent()

P. S: le titre a le javascript mot-clé pour éviter la confusion avec les mêmes questions dans d'autres langues (j'.e À l'aide asynchrone sans attendre)

  • Vous avez également besoin de convertir bButton.onclick fonction dans une fonction async et await pour b()pour terminer, afin d'obtenir le journal désiré.
  • Je ne veux pas attendre pour le journal, je veux savoir avec l'aide ou non à l'aide de await mot-clé modifie la fonction synchrone. Et si elle ne le fait pas, peut-être pourquoi mon test est faux. Je vais mettre à jour avec mon vrai cas d'utilisation à la fin, ce sera peut-être plus clair pour vous.
  • Lecture recommandée - medium.com/javascript-in-plain-english/...
InformationsquelleAutor Ulysse BN | 2017-08-09
  1. 27

    de mozilla doc:

    Une fonction async peut contenir une attendent expression, qui met en pause le
    l'exécution de la fonction async et attend la Promesse de l'
    la résolution, et reprend ensuite l'asynchrone en fonction de l'exécution et de la
    renvoie la valeur résolue.

    Comme vous l'avez supposé, si aucune attendent est présent à l'exécution n'est pas suspendue et votre code sera exécuté de manière synchrone.

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function#Description

    • est-il un eslint règle pour les async mot-clé? Je ne pense pas synchrone fonctions devraient l'avoir
    • Peut-être celui-ci: eslint.org/docs/rules/require-await
    • oh oui, c'est l'un. raté quelque sorte 😀 merci
    • Un des avantages d'un en déclarant "asynchrone" dans une fonction qui renvoie une promesse, mais ne pas utiliser await est que les exceptions seront rejetées à la place de façon synchrone levée. par exemple, const result = someAsyncFunctionWithoutAwait().catch(handleRejection)
    • C'est pas le comportement que je vois dans Chrome... il semble parfois des trucs que doit être synchrone des vents qui se passe après l'asynchrone en fonction retourne s'attendent n'est pas utilisé.
    • Je ne comprends pas cette réponse... j'ai juste couru une simple expérience dans google Chrome Dev Tools, et il s'avère que l'appel d'une promesse dans une fonction qui n'est pas marquée async et n'utilisant pas de await, ne bloque pas, comme prévu... Donc si il ne bloque pas, cela signifie qu'il est exécutée de manière asynchrone, à droite? Voici l'exemple: f = () => new Promise((resolve, reject) => setTimeout(() => resolve(console.log('hello')), 2000)); et de l'appeler comme (() => { f(); console.log('world') })() donne "monde", puis "undefined", puis "bonjour" ... Alors, pourquoi aurais-je besoin de marquer une fonction async si je ne suis pas en utilisant await?
    • En d'autres termes, ne faut-il pas que cette réponse est de dire "si aucune attendent est présent à l'exécution n'est pas suspendue, mais votre code sera toujours exécuté dans un non-bloquant de manière" au lieu de "si aucun attendent est présent à l'exécution n'est pas suspendue et votre code sera exécuté de manière synchrone"? En outre, si aucun async et n'attendent est présent, votre code sera toujours non-bloquant (par exemple, la déclaration d'une fonction avec le mot-clé async sans attendre équivaut à ne pas déclarer de la même fonction avec le mot-clé async).

    InformationsquelleAutor Karim
  2. 12

    La fonction est exécutée de la même avec ou sans await. Ce await n'est automatiquement attendre la promesse qui est retourné par la fonction à régler.

    await timeout(1000);
more code here;

    est à peu près équivalent à:

    timeout(1000).then(function() {
    more code here;
});

    La async function déclaration rend tout simplement la fonction de retour automatique d'une promesse qui est résolu lorsque la fonction retourne.

    InformationsquelleAutor Barmar
  3. 11

    Tout est synchrone jusqu'à ce qu'un Javascript asynchrone fonction est exécutée. En utilisant asynchrone attendent await est asynchrone et tout ce qui suit vous attendent, est placé dans la file d'attente des événements. Semblable à .then().

    Pour mieux expliquer prenez cet exemple:

    function main() {
  return new Promise( resolve => {
    console.log(3);
    resolve(4);
    console.log(5);
  });
}

async function f(){
    console.log(2);
    let r = await main();
    console.log(r);
}

console.log(1);
f();
console.log(6);

    Comme await est asynchrone et le reste tous est synchrone, y compris la promesse donc la sortie est

    1
2
3
5
6
//Async happened, await for main()
4

    Un comportement similaire de main() est sans promesse trop:

    function main() {
    console.log(3);
    return 4;
}

async function f(){
    console.log(2);
    let r = await main();
    console.log(r);
}

console.log(1);
f();
console.log(5);

    De sortie:

    1
2
3
5
//Asynchronous happened, await for main()
4

    Juste de retirer await fera tout async fonction synchrone qui il est.

    function main() {
    console.log(3);
    return 4;
}

async function f(){
    console.log(2);
    let r = main();
    console.log(r);
}

console.log(1);
f();
console.log(5);

    De sortie:

    1
2
3
4
5
    • Vous pourriez aussi ajouter une fonction qui n'var g = await f() puisque f() est asynchrone et aurait peut-être besoin d'être attendu un long processus en cours d'exécution si vous ne voulez pas bloquer le principal de l'exécution du thread.
    • await ne peut être utilisé à l'intérieur de async fonction.
    InformationsquelleAutor NAVIN