JavaScript không đồng bộ
"async và chờ đợi làm cho lời hứa dễ viết hơn"
async làm cho hàm trả về Promise
chờ đợi 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 sẽ khiến hàm trả về một lời hứa:
Ví dụ
async function myFunction() {
return "Hello";
}
Cũng giống như:
function myFunction() {
return Promise.resolve("Hello");
}
Đây là cách sử dụng Lời hứa:
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Ví 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):
Ví dụ
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Cú pháp chờ
Từ khóa await chỉ có thể được sử dụng bên trong hàm async .
Từ khóa await làm cho hàm tạm dừng việc thực thi và chờ một lời hứa được giải quyết trước khi tiếp tục:
let value = await promise;
Ví 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 xác định trước bởi JavaScript.
Chúng tôi sẽ không tạo chúng mà gọi một trong số chúng khi chức năng thực thi đã sẵn sàng.
Rất thường xuyên chúng ta sẽ không cần 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ờ 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 chờ một tập tin
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 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 |
