JavaScript Async
"asynchroon en afwachten maken beloften makkelijker te schrijven"
async zorgt ervoor dat een functie een belofte retourneert
wait laat een functie wachten op een belofte
Asynchrone syntaxis
Het sleutelwoord async
voor een functie zorgt ervoor dat de functie een belofte retourneert:
Voorbeeld
async function myFunction() {
return "Hello";
}
Is hetzelfde als:
function myFunction() {
return Promise.resolve("Hello");
}
Hier leest u hoe u de belofte kunt gebruiken:
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Voorbeeld
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Of eenvoudiger, aangezien u een normale waarde verwacht (een normale reactie, geen fout):
Voorbeeld
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Wacht op syntaxis
Het sleutelwoord await
voor een functie laat de functie wachten op een belofte:
let value = await promise;
Het await
sleutelwoord kan alleen binnen een
async
functie worden gebruikt.
Voorbeeld
Laten we langzaam gaan en leren hoe het te gebruiken.
Basissyntaxis
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
De twee argumenten (oplossen en weigeren) zijn vooraf gedefinieerd door JavaScript.
We zullen ze niet maken, maar een van hen aanroepen wanneer de uitvoerder-functie gereed is.
Heel vaak hebben we geen afwijsfunctie nodig.
Voorbeeld zonder afwijzing
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Wachten op een time-out
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Wachten op een bestand
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();
Browserondersteuning
ECMAScript 2017 introduceerde de JavaScript-sleutelwoorden
async
en await
.
De volgende tabel definieert de eerste browserversie met volledige ondersteuning voor beide:
Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |