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?

javascript promise async-await arrow-functions BonsaiOak
la source
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
})
BonsaiOak
la source
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" .)

Edoardo L'Astorina
la source
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());
})();
Michael
la source
18

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

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

Exemple de base

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

Vous pouvez également faire: 

 YourAsyncFunctionName = async (value) => {

    /* Code goes here */

}
Justin E. Samuels
la source
4
avec un paramètre, vous n'avez pas besoin de parenthèses. YourAsyncFunctionName = valeur async => {/ * Le code va ici * /}
Takács Zsolt