Syntaxe de la fonction de flèche asynchrone


499

Je peux marquer une fonction javascript comme "async" (c'est-à-dire renvoyer une promesse) avec le asyncmot - clé. Comme ça:

async function foo() {
  // do something
}

Quelle est la syntaxe équivalente pour les fonctions flèches?


2
Il convient de noter qu'au moins Firefox et Babel vous permettent de le faire
Jaromanda X

15
var foo = async () => await Promise.resolve('ha');- fonctionne très bien
Jaromanda X

2
dire it doesn't workn'a pas de sens ... obtenez-vous une erreur? peut-être que vous faites quelque chose de mal, sans le code qui "ne fonctionne pas" et une description significative de la façon dont cela ne fonctionne pas, ne peut que deviner que vous faites quelque chose de mal (ou en utilisant un ancien navigateur)
Jaromanda X

1
cela peut bien être @Pointy, mais cela fonctionne en natif dans Firefox, Chrome et node.js (7.7.4)
Jaromanda X

1
La spécification ES2017 comporte une section sur les définitions de fonction de flèche asynchrone @Pointy.
Heretic Monkey

Réponses:


845

Les fonctions des flèches asynchrones ressemblent à ceci:

const foo = async () => {
  // do something
}

Les fonctions fléchées asynchrones ressemblent à ceci pour un seul argument qui lui est passé:

const foo = async evt => {
  // do something with evt
}

Les fonctions de flèche asynchrone ressemblent à ceci pour plusieurs arguments qui lui sont passés:

const foo = async (evt, callback) => {
  // do something with evt
  // return response with callback
}

Le formulaire anonyme fonctionne également:

const foo = async function() {
  // do something
}

Une déclaration de fonction asynchrone ressemble à ceci:

async function foo() {
  // do something
}

Utilisation de la fonction asynchrone dans un rappel :

const foo = event.onCall(async () => {
  // do something
})

11
L'OP semble rechercher une fonction de flèche nommée, asynchrone, qui est la seule syntaxe que vous ne montrez pas.
jfriend00

48
En fait, const foo = async () => {}crée une fonction asynchrone nommée nommée foo. Il est tout à fait possible de faire des fonctions nommées de cette façon (juste pas de levage). Dans ES2016 + l'attribution d'une fonction anonyme à une variable la nomme après la variable si elle y est déclarée.
Benjamin Gruenbaum

5
@BenjaminGruenbaum Veuillez ne pas l'appeler fonction nommée. Dans js, une fonction anonyme nommée est une syntaxe très spécifique foo = function bar () {}qui a été créée pour remplacer arguments.calleelors de l'écriture de fonctions anonymes récursives. Ce que vous avez là est une variable nommée fooqui est une référence à une fonction.
slebetman

18
@slebetman depuis ES2015 lorsque vous effectuez const foo = async () => {}le nom de la fonction est défini sur foo- ecma-international.org/ecma-262/6.0/… et ecma-international.org/ecma-262/6.0/… - voir la discussion sur esdiscuss.org / topic /…
Benjamin Gruenbaum

1
@FarisRayhan Tout comme pour les autres constantes, la référence de la variable somefunctionne peut pas être modifiée une fois qu'elle est définie. (Il pointe vers votre fonction asynchrone anonyme.)
Qwerty

129

C'est le moyen le plus simple d'affecter une expression deasync fonction de flèche à une variable nommée :

const foo = async () => {
  // do something
}

(Notez que ce n'est pas strictement équivalent à async function foo() { }. Outre les différences entre le functionmot clé et une expression de flèche , la fonction de cette réponse n'est pas "hissée vers le haut" .)


11
Notez qu'une expression de fonction nommée est une syntaxe très spécifique en javascript. Ce n'est PAS une expression de fonction nommée. Il est important d'utiliser les bons mots pour éviter toute confusion plus tard lorsqu'une phrase peut évoluer pour signifier deux choses. Pour votre information, une expression de fonction nommée est: foo = function myName () {}. Le nom est myNameet il est spécifié qu'il n'existe qu'à l'intérieur de la fonction anonyme et n'est défini nulle part à l'extérieur. Son but est de remplacer arguments.calleelors de l'écriture de fonctions anonymes récursives.
slebetman

1
J'étais sur le point de vous contester @slebetman sur la technicité, car il s'agit d'une expression de fonction (flèche) et vous vous retrouvez avec une fonction nommée (c'est-à-dire foo.name === 'foo'). Mais seulement parce que c'est dans l'initialiseur d'une constinstruction * - ce qui signifie qu'il n'est pas tout à fait juste d'appeler cela une "expression de fonction de flèche asynchrone nommée". Vous avez également raison de dire que le nom d'une expression de fonction nommée n'est lié qu'à l' intérieur de son propre corps, mais il est également stocké dans la namepropriété de la fonction , ce qui est bien pour le débogage (et est plus souvent la raison pour laquelle je les nommerais).
Vaz

3
En d'autres termes, il n'existe pas d '"expression de fonction de flèche nommée", mais elle peut devenir "nommée" en faisant partie d'une instruction const ou let (pas sûr de var à cause du levage), dans le sens d'avoir un nom fn.nameainsi qu'une portée de liaison (la variable).
Vaz

41

Fonction de flèche asynchrone immédiatement invoquée:

(async () => {
    console.log(await asyncFunction());
})();

Expression de la fonction asynchrone immédiatement invoquée:

(async function () {
    console.log(await asyncFunction());
})();

18

Syntaxe de la fonction flèche asynchrone avec paramètres

const myFunction = async (a, b, c) => {
   // Code here
}

17

Exemple de base

folder = async () => {
    let fold = await getFold();
    //await localStorage.save('folder');
    return fold;
  };

13

Vous pouvez également faire:

 YourAsyncFunctionName = async (value) => {

    /* Code goes here */

}

4
avec un paramètre, vous n'avez pas besoin de parenthèses. YourAsyncFunctionName = valeur async => {/ * Le code va ici * /}
Takács Zsolt
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.