JavaScript Async
"asinkroniseer en wag maak beloftes makliker om te skryf"
async laat 'n funksie 'n belofte gee
await laat 'n funksie wag vir 'n belofte
Asinkroniese sintaksis
Die sleutelwoord async
voor 'n funksie laat die funksie 'n belofte gee:
Voorbeeld
async function myFunction() {
return "Hello";
}
Is dieselfde as:
function myFunction() {
return Promise.resolve("Hello");
}
Hier is hoe om die belofte te gebruik:
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, aangesien jy 'n normale waarde verwag ('n normale reaksie, nie 'n fout nie):
Voorbeeld
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Wag op Sintaksis
Die sleutelwoord await
voor 'n funksie laat die funksie wag vir 'n belofte:
let value = await promise;
Die await
sleutelwoord kan slegs binne 'n
async
funksie gebruik word.
Voorbeeld
Kom ons gaan stadig en leer hoe om dit te gebruik.
Basiese sintaksis
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Die twee argumente (los en verwerp) is vooraf gedefinieer deur JavaScript.
Ons sal hulle nie skep nie, maar een van hulle roep wanneer die eksekuteurfunksie gereed is.
Baie dikwels sal ons nie 'n verwerpfunksie nodig hê nie.
Voorbeeld sonder verwerping
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Wag vir 'n Timeout
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Wag vir 'n lêer
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();
Blaaierondersteuning
ECMAScript 2017 het die JavaScript-sleutelwoorde
async
en await
.
Die volgende tabel definieer die eerste blaaierweergawe met volle ondersteuning vir beide:
Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |