javascript async

"async và await làm cho Promise dễ viết hơn"
async làm cho một hàm trả về một Promise
await làm cho một hàm chờ một Promise

Cú pháp async

Từ khóa async đứng trước một hàm làm cho hàm trả về một Promise.

Thí dụ

async function myFunction() {
  return "Hello";
}

Giống như

function myFunction() {
  return Promise.resolve("Hello");
}

Và sau đó là cách sử dụng Promise.

myFunction().then(
  function(value) { // Code nếu thành công}
  function(value) { // Code nếu thất bại}
);

Ví dụ

function myDisplayer(text) {
    document.getElementById('demo').innerHTML = text ;    
}

async function myFunction() {
    return "Hello";    
}

myFunction().then(
    function(value) {myDisplayer(value);},
    function(error) {myDisplayer(error);}
);

Xem kết quả

Hoặc đơn giản hơn, vì chúng ta 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ụ

function myDisplayer(text) {
    document.getElementById('demo').innerHTML = text ;    
}

async function myFunction() {
    return "Hello";    
}

myFunction().then(
    function(value) {myDisplayer(value);},
);

Xem kết quả

Cú pháp await

Từ khóa await đứng trước một hàm làm cho hàm chờ một Promise.

var value = await Promise;

Các từ khóa await chỉ có thể được sử dụng bên trong một hàm async.

Ví dụ

Chúng ta hãy đi từ từ và học cách sử dụng nó.

Ví dụ

async function myDisplay() {
    var myPromise = new Promise(function(resolve, reject) {    
        resolve("Hello JavaScript!");
    });
    document.getElementById('demo').innerHTML = await myPromise ;    
}
myDisplay();

Xem kết quả

Hai đối số (resolve và reject) được JavaScript xác định trước.
Chúng ta 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.
Và chúng ta sẽ không cần một hàm reject.

Ví dụ không cần đối số reject

async function myDisplay() {
    var myPromise = new Promise(function(resolve) {    
        resolve("Hello JavaScript!");
    });
    document.getElementById('demo').innerHTML = await myPromise ;    
}
myDisplay();

Xem kết quả

Ví dụ chờ hết một thời gian

async function myDisplay() {
    var myPromise = new Promise(function(resolve) {    
        setTimeout(function() {resolve("Hello JavaScript!");},3000);
    });
    document.getElementById('demo').innerHTML = await myPromise ;    
}
myDisplay();

Xem kết quả

Ví dụ chờ một file bên ngoài

async function getFile() {
  var myPromise = new Promise(function(resolve) {
    var req = new XMLHttpRequest();
    req.open('GET', "/exampleJS/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();