JavaScript asynchrone
"async et await rendent les promesses plus faciles à écrire"
async fait qu'une fonction renvoie une promesse
await fait qu'une fonction attend une Promise
Syntaxe asynchrone
Le mot-clé async
avant une fonction oblige la fonction à renvoyer une promesse :
Exemple
async function myFunction() {
return "Hello";
}
Est le même que:
function myFunction() {
return Promise.resolve("Hello");
}
Voici comment utiliser la Promesse :
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Exemple
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Ou plus simple, puisque vous attendez une valeur normale (une réponse normale, pas une erreur) :
Exemple
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Attendre la syntaxe
Le mot-clé await
avant une fonction fait que la fonction attend une promesse :
let value = await promise;
Le await
mot-clé ne peut être utilisé qu'à l'intérieur d'une
async
fonction.
Exemple
Allons-y doucement et apprenons à l'utiliser.
Syntaxe de base
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Les deux arguments (résolution et rejet) sont prédéfinis par JavaScript.
Nous ne les créerons pas, mais en appellerons une lorsque la fonction d'exécuteur sera prête.
Très souvent, nous n'aurons pas besoin d'une fonction de rejet.
Exemple sans rejet
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Attente d'un délai d'attente
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
En attente d'un fichier
async function getFile() {
let myPromise = new Promise(function(resolve) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
} else {
resolve("File not Found");
}
};
req.send();
});
document.getElementById("demo").innerHTML = await myPromise;
}
getFile();
Prise en charge du navigateur
ECMAScript 2017 a introduit les mots clés JavaScript
async
et await
.
Le tableau suivant définit la première version du navigateur avec prise en charge complète des deux :
Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |