Lợi ích của Promise so với async-await

 

Như mọi người đã biết thì promise và async-await đều được sinh ra để giải quyết vấn đề xử lý bất đồng bộ trong javascript chúng khắc phục rất tốt nhược điểm của cách sử dụng callback function 
Tuy nhiên giữa chúng vẫn có sự khác nhau - và câu hỏi đặt ra là khi sử dụng promise có lợi ích gì hơn khi sử dụng async - await không ?

Ở trên chúng ta có 2 hàm trả về 1 promise , và ở trong tôi sử dụng setTimeout để minh họa cho việc chúng ta call api hay làm 1 tác vụ nào đó mà cần chờ thời gian để xử lý lần lượt là 3s và 2s.
cuối cùng là hàm total để tính tổng các giá trị được lấy từ 2 hàm trên 

Giả sử tính tổng của 5 và 7 thì đây sẽ là kết quả :

nó sẽ trả về 12 - tất nhiên là đúng tuy nhiên thời gian để xử lý tác vụ trên là xấp xỉ  5s
có nghĩa là khi sử dụng await hàm X thì chương trình sẽ phải đợi 3s để xử lý xong hàm X  và sau đó  hàm Y cũng phải đợi 2s để xử lý xong hàm Y. Còn số lẻ kia là thời gian tiến độ thực thi ứng dụng.

Và bản chất vấn đề trên là sai ,  tại vì sao ?
sai ở chỗ 2 hàm X và Y hoạt động độc lập và hầu như chẳng liên quan gì đến nhau . Chúng ta xử lý như trên có nghĩa là hàm Y phải đợi hàm X xử lý xong thì mới đến lượt nó . Tuy nhiên hàm Y này chẳng cần 1 dữ liệu nào từ hàm X trả về nên việc nó phải chờ đợi hàm X xong việc là thực sự không cần thiết !

Hãy xem thử cách làm dưới đây :
đưa vào tất cả promises vào Promise.all() thì nó khởi tạo tất cả promise này cùng lúc, mà khi được khởi tạo thì callback của promise đã được thực thi => chạy đồng thời với nhau

Có thể thấy tôi sử dụng cấu trúc destructuring để lấy ra 2 biến . ở Promise.all sẽ thực thi tất cả các promise đồng thời , và kết quả sẽ là :

Cùng 1 đáp án là 12 nhưng thời gian thực thi chỉ là 3s :)) 😂😵

Bonus thêm còn 1 cách viết nếu không muốn viết theo kiểu promise :

Đoán xem thời gian là mấy giây ? Cách viết theo kiểu await nhưng thời gian chạy thì lại tương tự như Promise.all . Tại sao lại ảo ma vậy ?

Nguyên nhân là như sau : Hàm call back của promise sẽ được chạy ngay khi promise đó được khởi tạo.
vì vậy ở dòng 18 và 19 khi ta cố tình gắn giá trị của promise vào hai biến _x và _y thì 
lúc đó 2 hàm callback ở trong X và Y đã được chạy rồi . Nên ở dòng 20,21 cho dù có sử dụng await cũng không làm nó bị block . 

Có điều gì đặc biết không - đó là với c2 và c3 thì tổng thời gian để xử lí các tác vụ sẽ bằng thời gian của tác vụ được xử lý lâu nhất .
ví dụ nếu viết hàm tính tổng 3 số x,y,z mà tác vụ để tính ra số z hết 5s thì tất nhiên tổng thời gian xử lý hàm này là khoảng 5s

Nguyên nhân lí giải cho sự tiện lợi này có thể là do cơ chế eventloop ở javascript có thể tham khảo thêm về cơ chế này tại đây 👉 :  eventloop !

hoặc ở link :
(https://blogchanhday.com/p/javascript-tong-quan-ve-engine-runtime-call-stack-va-event-loop/)