Nếu bạn là một kỹ sư hoặc nhà phát triển đến từ các ngôn ngữ lập trình khác nhau, bạn có thể đã sử dụng một phương thức gốc có tên là sleep() để ngăn chặn hoặc tạm dừng thực thi một phương thức. JavaScript không có phương thức gốc như vậy.
Trong bài viết này, chúng ta sẽ nói về hai cách khác nhau mà chúng ta có thể sử dụng JavaScript để mô phỏng một hàm sleep:Promises và async / await.
Giới thiệu về các hàm không đồng bộ
Chúng ta không nên nói về Promises hoặc các hàm async / await trong JavaScript mà không đề cập đến setTimeout() trước tiên một cách ngắn gọn. Phương pháp này sẽ chỉ ra lý do tại sao cần có Promise trong JavaScript.
JavaScript là một luồng
Khi chúng tôi nói JavaScript là một ngôn ngữ đơn luồng, ý của chúng tôi là JavaScript chỉ có một ngăn xếp lệnh gọi và một ngăn xếp bộ nhớ. Ở cấp độ cao, điều này có nghĩa là JavaScript đọc mã, từng dòng một, theo thứ tự và phải thực thi một đoạn mã trước khi chuyển sang dòng tiếp theo. Điều này làm cho JavaScript đồng bộ về bản chất. Đôi khi, chúng tôi cần phải làm việc để làm cho mã của chúng tôi không đồng bộ.
Mã đồng bộ so với Mã không đồng bộ
Hãy xem ví dụ này.
//synchronousconsole.log("This sẽ in đầu tiên ") console.log (" Điều này sẽ in thứ hai ") console.log (" Điều này sẽ in thứ ba ");
Khá đơn giản, phải không? Mỗi console.logs sẽ in liên tiếp vì JavaScript thực thi chúng liên tiếp.
Giả sử chúng ta muốn dòng hai in trước dòng ba? Về cơ bản chúng ta có thể in console.log đó như thế nào hết lượt? Chúng ta có thể làm điều đó với setTimeout() :
//setTimeoutconsole.log("This sẽ in đầu tiên ") setTimeout (() => {console.log (" Điều này sẽ in thứ ba ")}, 1000); console.log ("Điều này sẽ in thứ hai");
setTimeout() cho phép chúng tôi thực thi một hàm JavaScript mà không chặn luồng để mã khác có thể chạy. Đối số đầu tiên là hàm gọi lại chạy sau một khoảng thời gian nhất định (đối số thứ hai). Đối số thứ hai được biểu diễn bằng số mili giây.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
setTimeout() này phương pháp bắt chước phương pháp ngủ có nguồn gốc ở các ngôn ngữ khác bằng cách:
- Đặt bộ hẹn giờ trong nền khi công cụ JavaScript thực thi
setTimeout()chức năng - Tiếp tục chạy mã khác khi đồng hồ đếm ngược
- Thực thi chức năng gọi lại trong
setTimeout()khi bộ đếm thời gian về 0.
Hiểu cách thực hiện setTimeout() hoạt động rất quan trọng để có thể hiểu cách Promises và các Hàm async / await hoạt động. Chúng tôi sẽ đề cập đến Promise tiếp theo.
Lời hứa
Tạo một lời hứa
Lời hứa là một cách để thực hiện logic không đồng bộ. Phương thức khởi tạo Promise nhận vào một hàm gọi lại có hai tham số:giải quyết và từ chối. Hàm gọi lại này chứa logic mà sau khi hoàn tất, sẽ gọi hàm phân giải hoặc từ chối với một phản hồi được chuyển vào.
console.log ("trước lời hứa") let promise =new Promise ((giải quyết, từ chối) => {let ResolutionFlag =false; // đây chỉ là một cờ nên chúng ta có thể cố tình ném phản hồi để kiểm tra bảng điều khiển logic. log ("đầu tiên"); console.log ("thứ hai") console.log ("thứ ba") console.log ("thứ tư"); giải quyết Giải quyết xong new Error ("Hứa hẹn không thành công")); console.log ("sau lời hứa");}});
Đoạn mã ở đây thể hiện một lời hứa đơn giản. Lời hứa có thể ở ba trạng thái:
đang chờ xử lý - Không được giải quyết hoặc bị từ chối - đây là trạng thái ban đầu của lời hứa
đã giải quyết - Thực hiện thành công
bị từ chối - Lỗi khi thực hiện
Hãy thử chuyển đổi Thẻ được giải quyết từ đúng thành sai trong đoạn mã ở trên để chứng minh độ phân giải của một lời hứa đã giải quyết và một lời hứa bị từ chối.
Điều chính cần nhớ là Promise này chứa một hàm tạm dừng thực thi script cho đến khi Promise được giải quyết hoặc bị từ chối. Sau đó, tập lệnh tiếp tục.
Sử dụng phản hồi hứa hẹn
Khi chúng tôi bắt đầu một phiên bản Promise, chúng tôi sử dụng then() và catch() để đặt ra logic mà chúng tôi muốn sử dụng sau khi chúng tôi nhận được phản hồi từ Promise được trả lại. Điều này được trình bày dưới dạng một tuyên bố - tổng quan cấp cao trông giống như:
promise.then (func) .catch (func);
Trong dấu ngoặc đơn gọi phương thức then và catch là một hàm ẩn danh có phản hồi được chuyển vào dưới dạng tham số.
promise // lời hứa mà chúng ta đã tạo ở trên trong đoạn mã trước. .then (response => {// truy cập vào đây nếu phản hồi thành công // logic xảy ra trên phản hồi thành công console.log (response); console.log ("sau lời hứa");}) .catch (error => {/ / bắt được bất kỳ lỗi nào tại đây.
Lời hứa thường được sử dụng khi thực hiện cuộc gọi đến cơ sở dữ liệu hoặc khi thực hiện một yêu cầu HTTP.
Hàm Async / Await
Cách cuối cùng chúng ta có thể mô phỏng sleep() bằng cách sử dụng các hàm async / await. Về cơ bản, các hàm không đồng bộ này chỉ là một cách khác để xây dựng cùng một logic mà chúng ta sẽ sử dụng trong Promises, nhưng với ít mã hơn.
Thuật ngữ async được đặt trước hàm function từ khóa trong các hàm trước ES6 và trước các tham số trong các hàm ES6 +. Bất kỳ logic nào bạn muốn thực hiện trước khi tiếp tục đều nằm trong khối mã này.
const firstFunction =() => {// lôgic mà bạn muốn thực hiện không đồng bộ hãy để giải quyết =true; if (đã giải quyết) {let respObj ={message:"Đã giải quyết!"}; trả lại respObj.message; } else {let errObj ={message:"Error!"}; trả về errObj.message; }} const asyncExample =async () => {// từ khóa async trước nơi các tham số sẽ chuyển đến console.log ("Đang gọi hàm ..."); let result =await firstFunction (); // await đi trước lệnh gọi hàm chứa logic của bạn .// sẽ không chuyển sang dòng tiếp theo cho đến khi hàm được thực hiện xong. console.log (kết quả); trả về kết quả; } asyncExample () // gọi hàm async / await
Sử dụng các hàm async / await dẫn đến quá trình dựa trên lời hứa không đồng bộ gần như giống nhau nhưng với ít mã hơn.
Kết luận
Trong bài viết này, chúng tôi đã xem xét các cách bắt chước sleep() chức năng có nguồn gốc từ các ngôn ngữ lập trình khác. Chúng tôi đã sử dụng setTimeout() để trình bày khái niệm về các hàm JavaScript không đồng bộ để chúng ta có thể xem xét các hàm Promise và async / await.