JavaScript Async
"async and await làm cho lời hứa dễ viết hơn"
async làm cho một hàm trả về một Lời hứa
await làm cho một hàm chờ một Lời hứa
Cú pháp không đồng bộ
Từ khóa async
trước một hàm làm cho hàm trả về một lời hứa:
Thí dụ
async function myFunction() {
return "Hello";
}
Giống như:
function myFunction() {
return Promise.resolve("Hello");
}
Đây là cách sử dụng Promise:
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Thí dụ
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Hoặc đơn giản hơn, vì bạn mong đợi một giá trị bình thường (phản hồi bình thường, không phải lỗi):
Thí dụ
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Await Syntax
Từ khóa await
trước một hàm làm cho hàm chờ một lời hứa:
let value = await promise;
Từ await
khóa chỉ có thể được sử dụng bên trong một
async
hàm.
Thí dụ
Hãy đi từ từ và học cách sử dụng nó.
Cú pháp cơ bản
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Hai đối số (giải quyết và từ chối) được JavaScript xác định trước.
Chúng tôi sẽ không tạo chúng, nhưng gọi một trong số chúng khi hàm thực thi đã sẵn sàng.
Rất thường xuyên, chúng tôi sẽ không cần một chức năng từ chối.
Ví dụ không từ chối
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Đang chờ hết thời gian chờ
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Đang đợi một tệp
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();
Hỗ trợ trình duyệt
ECMAScript 2017 đã giới thiệu các từ khóa JavaScript
async
và await
.
Bảng sau đây xác định phiên bản trình duyệt đầu tiên có hỗ trợ đầy đủ cho cả hai:
Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |