Giới thiệu

Promise là gì?

Dùng Promise như thế nào?

console.log("Program begins");
const myPromise = myAsyncFunction();
myPromise
  .then((myAnswer) => console.log(myAnswer))
  .catch((myError) => console.error(myError));
console.log("Program ends");

console.log("Program begins");
const myPromise = myAsyncFunction();
try {
  const myAnswer = await myPromise;
  console.log(myAnswer);
} catch (myError) {
  console.error(myError);
}
console.log("Program ends");

Dùng callback

• (myAnswer) => console.log(myAnswer). Hàm này là parameter của hàm then, nghĩa là nó sẽ được gọi khi myPromise được fulfilled. myAnswer là kết quả cuối cùng của myPromise. Ta gọi hàm này là then-callback.
• (myError) => console.error(myError). Hàm này là parameter của hàm catch, nghĩa là nó sẽ được gọi nếu myPromise bị rejected, hoặc cái hàm callback ở trên bị lỗi. Ta gọi hàm này là catch-callback.

Chuỗi then/catch

console.log("Program begins");
const myPromise = myAsyncFunction();
myPromise
  .then((myAnswer) => {
    console.log("My first answer is: ", myAnswer);
    return anotherFunction(myAnswer);
  })
  .catch((error) => {
    console.error(error);
    return 0;
  })
  .then((anotherAnswer) => {
    console.log("My second answer is: ", anotherAnswer);
  });
console.log("Program ends");

Dùng await

Tại sao await chỉ được dùng trong một hàm async?

const myAsyncFunction = async () => {
  return 42; // bạn trả về kiểu number ở đây
};
console.log(myAsyncFunction()); // bạn sẽ thấy kiểu `Promise` ở đây

const anotherFunction = () => {
  const myAnswer = await myAsyncFunction(); // code lỗi
  return myAnswer * 2;
};

const anotherFunction = async () => {
  const myAnswer = await myAsyncFunction(); // ok
  return myAnswer * 2;
};

Nếu cần phải gọi hàm async trong một hàm sync thì sao?

const anotherFunction = () => {
  return (async () => {
    const myAnswer = await myAsyncFunction(); // ok
    return myAnswer * 2;
  })();
};

Cách tạo một Promise

const anotherFunction = () => {
  return new Promise((resolve) => {
    myAsyncFunction().then((myAnswer) => {
      resolve(myAnswer * 2);
    });
  });
};

new Promise((resolve, reject) => {
  // ...
});

legacyFunction(myInput, (myAnswer) => {
  // ...
})

legacyFunction(myInput, (myAnswer1) => {
  legacyFunction(myAnswer1, (myAnswer2) => {
    legacyFunction(myAnswer2, (myAnswer3) => {
      console.log(myAnswer3);
    });
  });
});

const redesignedFunction = (input) => {
  return new Promise((resolve) => {
    legacyFunction(input, (answer) => {
      resolve(answer);
    });
  });
}
const myAnswer1 = await redesignedFunction(myInput);
const myAnswer2 = await redesignedFunction(myAnswer1);
const myAnswer3 = await redesignedFunction(myAnswer2);

Khác biệt giữa async/await và then/catch

const myAnswer3 = await redesignFunction(myInput)
  .then(redesignFunction)
  .then(redesignFunction);

const myAnswer = await myAsyncFunction().catch();

const myAnswer = await myAsyncFunction().catch(() => 0);

Thứ tự thực thi của các lệnh như thế nào?

1. Hàm nào đang chạy trên call stack thì để cho nó chạy đến khi kết thúc và call stack trống hẳn.
2. Lần lượt thực thi tất cả các microtask đang có sẵn trong hàng đợi microtask. Các microtask mới được sinh ra sẽ phải chờ đến bước 4.
3. Thực thi một macrotask từ hàng đợi macrotask.
4. Lần lượt thực thi tất cả các microtask đang có sẵn trong hàng đợi microtask. Các microtask mới được sinh ra sẽ phải chờ đến bước 2 của vòng lặp tiếp theo.

console.log("Program begins");
const myPromise = myAsyncFunction();
myPromise
  .then((myAnswer) => console.log(myAnswer))
  .catch((myError) => console.error(myError));
console.log("Program ends");

Program begins
Program ends
42

console.log("Program begins");
const myPromise = myAsyncFunction();
try {
  const myAnswer = await myPromise;
  console.log(myAnswer);
} catch (myError) {
  console.error(myError);
}
console.log("Program ends");

console.log("Program begins");
const myPromise = myAsyncFunction();
myPromise
  .then((myAnswer) => {
    console.log(myAnswer);
    console.log("Program ends");
  })
  .catch((myError) => {
    console.error(myError);
    console.log("Program ends");
  });

Program begins
42
Program ends

Tóm tắt

1. Khi một hàm được tạo, các lệnh bên trong nó chỉ mới được định nghĩa chứ chưa chạy ngay.
2. Khi một hàm được gọi, các lệnh bên trong nó sẽ bắt đầu được thực thi ngay.
3. Các hàm callback (trong lệnh then, catch, v.v.) chỉ được đưa vào hàng đợi microtask sau khi Promise hoàn thành.
4. Các lệnh sẽ chạy liên tục không ngừng nghỉ trừ khi gặp await.
5. Nếu gặp await, tất cả các lệnh sau đó sẽ được gom lại thành các microtasks, đưa vào hàng đợi một khi Promise hoàn thành.

Vài ghi chú

Xử lý nhiều tác vụ async cùng lúc

const main = async () => {
  const user1 = await getUserInfo("username1");
  console.log(user1);
  const user2 = await getUserInfo("username2");
  console.log(user2);
};

const main = () => {
  getUserInfo("username1").then((user1) => console.log(user1));
  getUserInfo("username2").then((user2) => console.log(user2));
}

const main = async () => {
  const users = await Promise.all([getUserInfo("username1"), getUserInfo("username2")]);
  console.log(users[0]);
  console.log(users[1]);
}

Hàm async nhưng lại không có await

Tạo một Promise mà không có await

• Một là người viết dùng callback (then, catch, finally) để xử lý kết quả. Cú pháp callback là cú pháp cổ điển, cú pháp await chỉ mới ra đời sau này.
• Hai là code ẩu. Khả năng này cao hơn.

Tư liệu tham khảo

1. Promise - Mozilla
2. What the heck is the event loop anyway? - Philip Roberts
3. The anatomy of Asynchronous JavaScript - Hemant

Thử thách

Thử thách 1

fetch("https://example.com/api/v1")
  .then((res) => {
    displayResponse(res);
    cacheResponse(res);
  })
  .catch((error) => {
    displayError("Cannot process API request");
  });

Thử thách 2

const getUserInfo = async (username) => {
  fetch(`https://example.com/api/v1/${username}`)
    .then((res) => {
      return res;
    })
    .catch((error) => {
      console.error(error);
      throw error;
    });
};

Thử thách 3

const getAnswer = (question) => {
  return fetch(`https://example.com/api/v1/ask`, { body: JSON.stringify({ question }), /*..*/ });
};
// ...
try {
  const answer = await getAnswer(question);
  displayResponse(answer);
} catch (error) {
  displayError("Failed to get an answer");
}

Thử thách 4

const delay = (timeInMs) => {
  return new Promise((resolve) => {
    setTimeout(resolve, timeInMs);
  });
};

const printNumbersWithDelay = () => {
  for (let i = 0; i < 10; ++i) {
    console.log(i);
    delay(1000);
  }
}