JavaScript Async / Await
"async і await полегшують написання промісів".
Ключове слово async змушує функцію повертати Promise.
Ключове слово await змушує функцію чекати Promise.
Синтаксис Async
Ключове слово async перед функцією змушує функцію повертати Promise:
Приклад
async function myFunction() {
return "Hello";
}
Те саме, що:
function myFunction() {
return Promise.resolve("Hello");
}
Ось як використовувати Promise:
myFunction().then(
function(value) { /* код у разі успіху */ },
function(error) { /* код, якщо якась помилка */ }
);
Приклад
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Спробуйте самі »
Або простіше, оскільки ви очікуєте нормального значення (нормальної відповіді, а не помилки):
Приклад
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Спробуйте самі »
Синтаксис Await
Ключове слово await можна використовувати лише всередині функції async.
Ключове слово await змушує функцію призупиняти виконання та чекати вирішеного промісу перед продовженням:
let value = await promise;
Приклад
Давайте повільно навчимося ним користуватися.
Базовий синтаксис
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Спробуйте самі »
Два аргументи - resolve (вирішити) та reject (відхилити) попередньо визначені JavaScript.
Ми не створюватимемо їх, але викличемо один із них, коли функція-виконавець буде готова.
Дуже часто функція відхилення не потрібна.
Приклад без reject
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Спробуйте самі »
Очікування тайм-ауту
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Спробуйте самі »
Очікування файлу
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();
Спробуйте самі »
Підтримка браузерами
ECMAScript 2017 представив ключові слова JavaScript async та await.
У наступній таблиці визначено першу версію браузера з повною підтримкою обох:
| Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
| Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |
