Asynchroniczny JavaScript
„asynchronizuj i czekaj, aby łatwiej było pisać obietnice”
async powoduje, że funkcja zwraca obietnicę
await powoduje, że funkcja czeka na obietnicę
Składnia asynchroniczna
Słowo kluczowe async
przed funkcją powoduje, że funkcja zwraca obietnicę:
Przykład
async function myFunction() {
return "Hello";
}
Jest taki sam jak:
function myFunction() {
return Promise.resolve("Hello");
}
Oto jak korzystać z obietnicy:
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Przykład
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Lub prościej, ponieważ oczekujesz normalnej wartości (normalnej odpowiedzi, a nie błędu):
Przykład
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Czekaj na składnię
Słowo kluczowe await
przed funkcją powoduje, że funkcja czeka na obietnicę:
let value = await promise;
Słowo await
kluczowe może być użyte tylko wewnątrz
async
funkcji.
Przykład
Chodźmy powoli i nauczmy się go używać.
Podstawowa składnia
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Dwa argumenty (rozwiąż i odrzuć) są wstępnie zdefiniowane przez JavaScript.
Nie stworzymy ich, ale wywołamy jeden z nich, gdy funkcja executora będzie gotowa.
Bardzo często nie będziemy potrzebować funkcji odrzucania.
Przykład bez odrzucenia
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Czekam na limit czasu
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Czekam na plik
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();
Obsługa przeglądarki
ECMAScript 2017 wprowadził słowa kluczowe JavaScript
async
i await
.
Poniższa tabela definiuje pierwszą wersję przeglądarki z pełną obsługą obu:
Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |