Cơ bản về Async Await trong Javascript

Khi tôi bắt đầu lập trình với Nodejs, vì Javascript (JS) là không đồng bộ (asynchoronous) nên tôi gặp khó khăn trong việc tổ chức mã như trong lập trình đồng bộ (synchoronous). Đặt mã vào lệnh gọi lại khiến tôi cảm thấy rằng mã trở nên khó đọc trong một chuỗi như trong PHP hoặc Ruby, vì vậy tôi đã tìm hiểu và sử dụng cú pháp của async await theo tiêu chuẩn JS ES6. Sử dụng các cú pháp mới này giúp mã của bạn có tổ chức hơn.

Khi sử dụng cú pháp async await, bạn phải có ý tưởng về luồng của các hàm này và những gì được trả về trong các hàm đó. Ở đây tôi muốn trình bày thứ tự chạy các lệnh khi có sự chờ đợi không đồng bộ trong Nodejs.

Hãy xem xét ví dụ cơ bản sau khi không có async đang chờ đợi

Đoạn mã trên có findOne () là hàm chạy không đồng bộ, vì vậy không có câu hỏi nào về thứ tự in sẽ là:

Hãy xem xét ví dụ cơ bản sau về hàm await không đồng bộ.

Async await được tạo để tránh các hàm gọi lại, vì vậy đừng viết await và gọi lại cùng nhau.

Bạn dự đoán đoạn mã trên sẽ in ra theo thứ tự như thế nào?

Thứ tự sẽ như sau:

Để trả lời câu hỏi trên, có một số lưu ý cần nhớ:

chờ đợi luôn ở trong chức năng không đồng bộ như ví dụ trên (chờ đợi không thể có trong hàm không được khai báo trước từ Key async)

Mình nghĩ bạn cần xem =>  Phân biệt Differential backup và Incremental backup - Nên lựa chọn thế nào và khi nào nên sử dụng cái nào?

• Thứ tự thực hiện các câu lệnh trong js nói chung hay nodejs nói riêng là chạy từ trên xuống dưới (tức là chạy sync chứ không phải async), trừ các hàm liên quan đến I / O thì chạy async. Xem thêm trong bài viết vòng lặp sự kiện trong js)

• Khi họp chờ đợi, nó sẽ chuyển đổi chức năng đó thành lời hứa với gọi lại Tất cả mã đằng sau đó đang chờ đợi. Bản chất của await là một lời hứa, mã đằng sau await thực sự là mã trong lệnh gọi lại của hàm await. Ví dụ: hai đoạn mã dưới đây là tương đương:

Nếu bạn biết ví dụ trên, thì các đoạn mã sau bạn sẽ biết thứ tự và kết quả được in ra như sau:

Ví dụ 1:

Thứ tự in là:

Lưu ý rằng hàm findResult không trả về j nhưng kết quả vẫn in ra dưới dạng Promise vì hàm có khai báo async ở phía trước luôn trả về Promise (giải thích ở phía sau).

Vậy để nhận được kết quả thực từ câu lệnh findOne () của VD1 trong hàm execute (), chúng ta cần làm gì? Vì findResult () trả về một Promise, chúng ta chỉ cần gọi hàm then () nơi nó được trả về, xem xét ví dụ 2 bên dưới:

Ví dụ 2:

Đầu ra sẽ là:

Hàm async luôn trả về một lời hứa

Gọi hàm với từ Key không đồng bộ phía trước luôn trả về một lời hứa, cho dù nó đang chờ đợi hay không.

Ví dụ 1:

Lời hứa ví dụ này luôn trả về 10.

Ví dụ 2:

Lời hứa ví dụ này không trả về kết quả.

Khi chờ đợi ở trong một vòng lặp

Chú ý nếu chờ đợi trong vòng lặp hơi khác một chút, hãy xem xét đoạn mã sau:

Nhiều người có thể sẽ nghĩ đoạn mã trên tương đương với:

Nhưng không phải, mỗi khi gặp nhau chờ đợi Sau đó chúng ta phải đợi kết quả chạy đến i tiếp theo, đoạn mã tương đương sẽ như sau:

Mình nghĩ bạn cần xem =>  Mariadb là gì? Hướng dẫn cách cài đặt Mariadb

Đầu ra sẽ là:

Hãy xem xét ví dụ khó hơn khi có 2 hàm không đồng bộ lồng nhau

Ví dụ 1: Hàm thứ hai là một hàm bình thường nhưng có khối không đồng bộ phía trong.

Thứ tự in sẽ là:

Giải thích:

• Thứ tự in từ đầu đến cuối thực thi “như mong đợi vì mã chạy đúng theo thứ tự đồng bộ (đồng bộ, hoặc từ trên xuống dưới).

• Tại sao “sau findResult” được in trước “kết quả 1: {…}” ???:

Bởi vì khi gọi hàm await trong hàm f * indResult *, console.log (‘sau findResult’) đã được đặt trong lệnh gọi lại của hàm await đó và sau đó kết quả trả về cho lệnh gọi lại result1 được in.

• Tại sao “kết quả 2: {…}” được in đầu tiên “kết quả 1: {…}” ???:

2 lời gọi fA () trong findResult () và findResult () trong execute () là 2 hàm không đồng bộ không phụ thuộc vào nhau nên hàm có kết quả trả về trước sẽ được thực hiện trước.

Ở trên, câu lệnh async ở dòng 36 trả về nhanh hơn kết quả trong câu lệnh 22.

Nếu bạn không tin, bạn có thể tùy chỉnh câu lệnh trên dòng 36 có thời gian thực thi là 10 giây, bây giờ “result2: {…}” sẽ được in sau “result 1: {…}”

Ví dụ 2: Chức năng thứ hai là chức năng không đồng bộ.

Thứ tự in sẽ là:

Điều này được giải thích giống như ví dụ trên, và cũng giống như ví dụ trên, kết quả 2 được in trước kết quả 1 vì hàm không đồng bộ giá trị của nó được trả về trước đó.

Một số lưu ý khi sử dụng async / await (promise) trong Javascript

• Thận trọng khi sử dụng chờ đợi trong vòng lặp như đã đề cập ở trên.

• Khi gặp await, đoạn mã sau có thể trả về kết quả, vì vậy nếu mã phía sau không phụ thuộc vào await, bạn nên xử lý như sau:

Mình nghĩ bạn cần xem =>  CC trong gmail là gì? Cách sử dụng các tính năng CC và BCC trong Gmail

Hãy xem xét ví dụ sau:

Đoạn mã trên result1 có kết quả, sau đó hàm nhận result2 sẽ chạy. Nhưng điều bạn muốn là cả hai hàm lấy result1 và result2 phải chạy song song, bạn cần chuyển đổi thành như sau:

Nhìn vào hai mã trông giống nhau, nhưng khác nhau. Bạn nên đọc cách hoạt động của Javascript để hiểu thứ tự mà JavaScript chạy các câu lệnh.

✤ Top 20 bài viết Tổng Hợp mới nhất :

Xem thêm nhiều Tổng Hợp mới hay

Leave A Reply

Your email address will not be published.