Giải thích về JavaScript Promises và Async/Await

Hãy thử tưởng tượng việc đặt pizza trực tuyến.

Bạn đặt hàng. Bạn không đứng đợi ở cửa mà không làm gì cho đến khi pizza được giao tới. Bạn xem video, làm việc hoặc trò chuyện với bạn bè. Khi pizza đến, bạn ăn.

JavaScript cũng hoạt động theo cách tương tự.

Các thao tác như yêu cầu API, gọi cơ sở dữ liệu và bộ hẹn giờ đều cần thời gian. Nếu JavaScript phải đợi từng tác vụ hoàn thành, ứng dụng của bạn sẽ bị đóng băng. Thay vào đó, JavaScript sẽ chạy các mã khác trong khi chờ đợi kết quả.

Promise là gì?

Một Promise là một trình giữ chỗ cho một giá trị mà bạn sẽ nhận được trong tương lai.

Khi bạn chạy: const promise = fetch("/users");

Dữ liệu vẫn chưa có sẵn. Promise nói rằng: "Hiện tại tôi chưa có kết quả, nhưng tôi sẽ báo cho bạn khi nó đã sẵn sàng."

Một Promise có ba trạng thái:

Hầu hết các API hiện đại như fetch() đều tự động trả về một Promise. Bạn không cần phải tạo chúng một cách thủ công mỗi lần. Bạn chỉ việc sử dụng chúng.

.then() dùng để làm gì?

Nhiều người lầm tưởng rằng .then() dùng để lấy dữ liệu. Thực tế không phải vậy.

.then() đăng ký một hàm callback. Bạn đang nói với JavaScript rằng: "Khi Promise này hoàn tất, hãy chạy hàm cụ thể này."

Nó giống như một ứng dụng giao đồ ăn. Bạn đặt món, và ứng dụng báo với bạn: "Hãy gọi cho tôi khi thức ăn đến." Hàm đó sẽ chờ đợi tín hiệu.

Tại sao nên dùng Async/Await?

Bạn có thể nối chuỗi các lời gọi .then() để lấy dữ liệu theo từng bước. Cách này vẫn hoạt động, nhưng các chuỗi dài sẽ rất khó đọc.

Async/await giúp mã của bạn trông giống như mã tuần tự bình thường. Nó sạch sẽ hơn và dễ theo dõi hơn.

await có làm chặn (block) JavaScript không?

Đây là một câu hỏi phỏng vấn phổ biến. Câu trả lời là không.

Khi JavaScript gặp từ khóa await, nó chỉ tạm dừng hàm async cụ thể đó. Phần còn lại của ứng dụng vẫn tiếp tục chạy.

Luồng ví dụ:

  1. Chạy mã trong hàm.
  2. Gặp await và tạm dừng hàm đó.
  3. Chạy phần còn lại của script.
  4. Khi tác vụ hoàn tất, tiếp tục thực hiện hàm.

Tóm tắt:

Nguồn: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm