JavaScript Асинхронный
"async и await упрощают написание Промисов".
async заставляет функцию возвращать Промис.
await заставляет функцию ждать Промис.
Синтаксис Async
Ключевое слово async перед функцией заставляет функцию возвращать Промис:
Пример
async function myFunction() {
return "Hello";
}
Такой же как:
function myFunction() {
return Promise.resolve("Hello");
}
Вот как использовать Промис:
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 перед тем, как функция заставит функцию ждать Промис:
let value = await promise;
Ключевое слово await можно использовать только внутри функции async.
Пример
Пойдем медленно и научимся его использовать.
Базовый синтаксис
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 (отклонения).
Пример без 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 |
