Hướng dẫn asynchronous javascript freecodecamp - freecodecamp javascript không đồng bộ

Hôm nay chúng ta sẽ xây dựng và điều hành một cửa hàng kem và học JavaScript không đồng bộ cùng một lúc. Trên đường đi, bạn sẽ học cách sử dụng:ice cream shop and learn asynchronous JavaScript at the same time. Along the way, you'll learn how to use:

Gọi lại
Hứa hẹn
Async / chờ đợi

Đây là những gì chúng tôi sẽ đề cập trong bài viết này:

JavaScript không đồng bộ là gì?
JavaScript không đồng bộ đồng bộ
Cách gọi lại hoạt động trong JavaScript
Cách những lời hứa hoạt động trong JavaScript
Làm thế nào Async / Await hoạt động trong JavaScript

Vì vậy, chúng ta hãy đi sâu vào!

Bạn cũng có thể xem hướng dẫn này trên YouTube nếu bạn thích:

JavaScript không đồng bộ là gì?

JavaScript không đồng bộ đồng bộ

Cách gọi lại hoạt động trong JavaScript

Cách những lời hứa hoạt động trong JavaScriptcallbacks, promises or Async/await – to run those small tasks in a way that you get the best results.

Làm thế nào Async / Await hoạt động trong JavaScript

JavaScript không đồng bộ đồng bộ

Cách gọi lại hoạt động trong JavaScript

Cách những lời hứa hoạt động trong JavaScript

Làm thế nào Async / Await hoạt động trong JavaScript

Vì vậy, chúng ta hãy đi sâu vào!

Bạn cũng có thể xem hướng dẫn này trên YouTube nếu bạn thích:

Nếu bạn muốn xây dựng các dự án một cách hiệu quả, thì khái niệm này là dành cho bạn.[single threaded]. Think about it like this – one thread means one hand with which to do stuff.

Lý thuyết về JavaScript Async giúp bạn chia các dự án phức tạp lớn thành các nhiệm vụ nhỏ hơn.

Sau đó, bạn có thể sử dụng bất kỳ trong ba kỹ thuật này - gọi lại, lời hứa hoặc async/chờ đợi - để chạy các nhiệm vụ nhỏ đó theo cách mà bạn có được kết quả tốt nhất.

Hãy đi sâu vào!

Hệ thống đồng bộ là gì?

Trong một hệ thống đồng bộ, các nhiệm vụ được hoàn thành lần lượt.

Hãy nghĩ về điều này như thể bạn chỉ có một tay để hoàn thành 10 nhiệm vụ. Vì vậy, bạn phải hoàn thành một nhiệm vụ tại một thời điểm.

Hãy xem GIF 👇 - Một điều đang xảy ra tại một thời điểm ở đây:

Bạn sẽ thấy rằng cho đến khi hình ảnh đầu tiên được tải hoàn toàn, hình ảnh thứ hai không bắt đầu tải. system, three images are in the same lane. One can't overtake the other. The race is finished one by one. If image number 2 stops, the following image stops.

Vâng, JavaScript theo mặc định đồng bộ [một luồng đơn]. Hãy nghĩ về nó như thế này - một chủ đề có nghĩa là một tay để làm công cụ. the three images are in different lanes. They'll finish the race on their own pace. Nobody stops for anybody:

Hệ thống không đồng bộ là gì?

Trong hệ thống này, các nhiệm vụ được hoàn thành độc lập.

Ở đây, hãy tưởng tượng rằng trong 10 nhiệm vụ, bạn có 10 tay. Vì vậy, mỗi bàn tay có thể thực hiện mỗi nhiệm vụ một cách độc lập và cùng một lúc.

Hãy xem gif 👇 - bạn có thể thấy rằng mỗi hình ảnh tải cùng một lúc.

console.log(" I "); console.log(" eat "); console.log(" Ice Cream ");

Một lần nữa, tất cả các hình ảnh đang tải theo tốc độ của riêng họ. Không ai trong số họ đang chờ đợi bất kỳ ai trong số những người khác.

Để tóm tắt các JS không đồng bộ đồng bộ: JS không đồng bộ:

Khi ba hình ảnh đang ở trên một cuộc đua marathon, trong A:

Hệ thống đồng bộ, ba hình ảnh nằm trong cùng một làn. Người này không thể vượt qua người kia. Cuộc đua được hoàn thành từng cái một. Nếu hình ảnh số 2 dừng, hình ảnh sau sẽ dừng. Don't worry, we'll discuss the let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 6 function later in this article.

console.log("I"); // This will be shown after 2 seconds setTimeout(()=>{ console.log("eat"); },2000) console.log("Ice Cream")

Hệ thống không đồng bộ, ba hình ảnh ở các làn khác nhau. Họ sẽ kết thúc cuộc đua theo tốc độ của riêng họ. Không ai dừng lại cho bất cứ ai:

Ví dụ mã đồng bộ và không đồng bộ

Trước khi bắt đầu dự án của chúng tôi, chúng ta hãy xem xét một số ví dụ và làm rõ mọi nghi ngờ.

Ví dụ mã đồng bộ

Để kiểm tra một hệ thống đồng bộ, hãy viết mã này bằng JavaScript:

Đây là kết quả trong bảng điều khiển: 👇

Ví dụ về mã không đồng bộ

Giả sử phải mất hai giây để ăn một ít kem. Bây giờ, hãy thử nghiệm một hệ thống không đồng bộ. Viết mã dưới đây trong JavaScript.

Lưu ý: Đừng lo lắng, chúng tôi sẽ thảo luận về chức năng let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 6 sau trong bài viết này.

Và đây là kết quả trong bảng điều khiển: 👇

Bây giờ bạn đã biết sự khác biệt giữa các hoạt động đồng bộ và async, hãy xây dựng cửa hàng kem của chúng tôi.

Cách thiết lập dự án của chúng tôi

Đối với dự án này, bạn chỉ có thể mở Codepen.io và bắt đầu mã hóa. Hoặc, bạn có thể làm điều đó trong mã VS hoặc biên tập viên bạn chọn.

Mở phần JavaScript, và sau đó mở bảng điều khiển nhà phát triển của bạn. Chúng tôi sẽ viết mã của chúng tôi và xem kết quả trong bảng điều khiển.

Các cuộc gọi lại trong JavaScript là gì?

Khi bạn làm tổ một hàm bên trong một hàm khác như một đối số, đó được gọi là một cuộc gọi lại.

Đây là một minh họa về một cuộc gọi lại:

Một ví dụ về một cuộc gọi lại

Đừng lo lắng, chúng ta sẽ thấy một số ví dụ về cuộc gọi lại trong một phút.

Tại sao chúng ta sử dụng các cuộc gọi lại?
Khi thực hiện một nhiệm vụ phức tạp, chúng tôi chia nhiệm vụ đó thành các bước nhỏ hơn. Để giúp chúng tôi thiết lập mối quan hệ giữa các bước này theo thời gian (tùy chọn) và đặt hàng, chúng tôi sử dụng các cuộc gọi lại.

Hãy xem ví dụ này: 👇

Biểu đồ chứa các bước để làm kem

Đây là những bước nhỏ bạn cần để làm kem. Cũng lưu ý rằng trong ví dụ này, thứ tự của các bước và thời gian là rất quan trọng. Bạn không thể cắt trái cây và phục vụ kem.

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"] }

Đồng thời, nếu bước trước không hoàn thành, chúng ta không thể chuyển sang bước tiếp theo.

Để giải thích điều đó chi tiết hơn, hãy bắt đầu kinh doanh cửa hàng kem của chúng tôi.

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], };

Nhưng chờ đã ...orders. Once we have an order, we start production and then we serve ice cream. So, we'll create two functions ->

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 7
let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 8

Đây là cách tất cả hoạt động: 👇

Nhận đơn đặt hàng từ khách hàng, tìm nạp các thành phần, bắt đầu sản xuất, sau đó phục vụ.

Hãy tạo ra các chức năng của chúng tôi. Chúng tôi sẽ sử dụng các chức năng mũi tên ở đây:

let order = () =>{}; let production = () =>{};

Bây giờ, hãy thiết lập mối quan hệ giữa hai chức năng này bằng cách sử dụng cuộc gọi lại, như thế này: 👇

let order = (call_production) =>{ call_production(); }; let production = () =>{};

Hãy làm một bài kiểm tra nhỏ

Chúng tôi sẽ sử dụng chức năng let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 9 để tiến hành các bài kiểm tra để xóa bỏ mọi nghi ngờ mà chúng tôi có thể có về cách chúng tôi thiết lập mối quan hệ giữa hai chức năng.

let order = (call_production) =>{ console.log("Order placed. Please call production") // function 👇 is being called call_production(); }; let production = () =>{ console.log("Production has started") };

Để chạy thử nghiệm, chúng tôi sẽ gọi hàm let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 7. Và chúng tôi sẽ thêm hàm thứ hai có tên let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 8 làm đối số của nó.let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 7 function. And we'll add the second function named let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 8 as its argument.

// name 👇 of our second function order(production);

Đây là kết quả trong bảng điều khiển của chúng tôi 👇

Nghỉ ngơi một lát

Cho đến nay rất tốt - hãy nghỉ ngơi!

Xóa bảng điều khiển.log

Giữ mã này và xóa mọi thứ [không xóa biến cổ phiếu của chúng tôi]. Trong chức năng đầu tiên của chúng tôi, hãy vượt qua một đối số khác để chúng tôi có thể nhận được đơn đặt hàng [Tên trái cây]:

// Function 1 let order = (fruit_name, call_production) =>{ call_production(); }; // Function 2 let production = () =>{}; // Trigger 👇 order("", production);

Dưới đây là các bước của chúng tôi, và thời gian mỗi bước sẽ thực hiện để thực hiện.

Biểu đồ chứa các bước để làm kem

Trong biểu đồ này, bạn có thể thấy rằng bước 1 là đặt thứ tự, mất 2 giây. Sau đó, bước 2 được cắt trái cây (2 giây), bước 3 là thêm nước và đá (1 giây), bước 4 là khởi động máy (1 giây), bước 5 là chọn thùng chứa (2 giây), bước 6 là chọn toppings (3 giây) và bước 7, bước cuối cùng, là phục vụ kem mất 2 giây.

Để thiết lập thời gian, hàm let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 6 là tuyệt vời vì nó cũng sử dụng một cuộc gọi lại bằng cách lấy một hàm làm đối số.

Cú pháp của hàm setTimeout ()

Bây giờ, hãy chọn trái cây của chúng tôi và sử dụng chức năng này:

// 1st Function let order = (fruit_name, call_production) =>{ setTimeout(function(){ console.log(`${stocks.Fruits[fruit_name]} was selected`) // Order placed. Call production to start call_production(); },2000) }; // 2nd Function let production = () =>{ // blank for now }; // Trigger 👇 order(0, production);

Và đây là kết quả trong bảng điều khiển: 👇

Lưu ý rằng kết quả được hiển thị sau 2 giây. that the result is displayed after 2 seconds.

Nếu bạn đang tự hỏi làm thế nào chúng tôi chọn dâu tây từ biến chứng khoán của chúng tôi, thì đây là mã có định dạng 👇

Đừng xóa bất cứ điều gì. Bây giờ chúng tôi sẽ bắt đầu viết chức năng sản xuất của mình với mã sau. Chúng tôi sẽ sử dụng các chức năng mũi tên:

console.log("I"); // This will be shown after 2 seconds setTimeout(()=>{ console.log("eat"); },2000) console.log("Ice Cream") 0

Và đây là kết quả 👇

Chúng tôi sẽ tổ chức năng let order = () =>{}; let production = () =>{}; 3 khác trong chức năng let order = () =>{}; let production = () =>{}; 3 hiện tại của chúng tôi để cắt trái cây. Như thế này: 👇

console.log("I"); // This will be shown after 2 seconds setTimeout(()=>{ console.log("eat"); },2000) console.log("Ice Cream") 1

Và đây là kết quả 👇

Biểu đồ chứa các bước để làm kem

console.log("I"); // This will be shown after 2 seconds setTimeout(()=>{ console.log("eat"); },2000) console.log("Ice Cream") 2

Cú pháp của hàm setTimeout ()

Bây giờ, hãy chọn trái cây của chúng tôi và sử dụng chức năng này:

Và đây là kết quả trong bảng điều khiển: 👇

Lưu ý rằng kết quả được hiển thị sau 2 giây.

Nếu bạn đang tự hỏi làm thế nào chúng tôi chọn dâu tây từ biến chứng khoán của chúng tôi, thì đây là mã có định dạng 👇

Đừng xóa bất cứ điều gì. Bây giờ chúng tôi sẽ bắt đầu viết chức năng sản xuất của mình với mã sau. Chúng tôi sẽ sử dụng các chức năng mũi tên:

Nghỉ ngơi một lát

Cho đến nay rất tốt - hãy nghỉ ngơi!

Xóa bảng điều khiển.log

Dưới đây là các bước của chúng tôi, và thời gian mỗi bước sẽ thực hiện để thực hiện.

Biểu đồ chứa các bước để làm kem

Để thiết lập thời gian, hàm let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 6 là tuyệt vời vì nó cũng sử dụng một cuộc gọi lại bằng cách lấy một hàm làm đối số. This is the initial stage. Nothing happens here. Think of it like this, your customer is taking their time giving you an order. But they haven't ordered anything yet.
Cú pháp của hàm setTimeout () This means that your customer has received their food and is happy.
Bây giờ, hãy chọn trái cây của chúng tôi và sử dụng chức năng này: This means that your customer didn't receive their order and left the restaurant.

Và đây là kết quả trong bảng điều khiển: 👇

Lưu ý rằng kết quả được hiển thị sau 2 giây.

Nếu bạn đang tự hỏi làm thế nào chúng tôi chọn dâu tây từ biến chứng khoán của chúng tôi, thì đây là mã có định dạng 👇

Đừng xóa bất cứ điều gì. Bây giờ chúng tôi sẽ bắt đầu viết chức năng sản xuất của mình với mã sau. Chúng tôi sẽ sử dụng các chức năng mũi tên:
Và đây là kết quả 👇
Chúng tôi sẽ tổ chức năng let order = () =>{}; let production = () =>{}; 3 khác trong chức năng let order = () =>{}; let production = () =>{}; 3 hiện tại của chúng tôi để cắt trái cây. Như thế này: 👇
Nếu bạn nhớ, đây là các bước của chúng tôi:

Chúng ta hãy hoàn thành sản xuất kem của chúng ta bằng cách làm tổ một chức năng bên trong một chức năng khác - điều này còn được gọi là một cuộc gọi lại, hãy nhớ chứ?

Đừng xóa bất cứ điều gì. Bây giờ chúng tôi sẽ bắt đầu viết chức năng sản xuất của mình với mã sau. Chúng tôi sẽ sử dụng các chức năng mũi tên:

Và đây là kết quả 👇

Biểu đồ chứa các bước để làm kem

console.log("I"); // This will be shown after 2 seconds setTimeout(()=>{ console.log("eat"); },2000) console.log("Ice Cream") 3

console.log("I"); // This will be shown after 2 seconds setTimeout(()=>{ console.log("eat"); },2000) console.log("Ice Cream") 4

Cú pháp của hàm setTimeout ()

console.log("I"); // This will be shown after 2 seconds setTimeout(()=>{ console.log("eat"); },2000) console.log("Ice Cream") 5

Bây giờ, hãy chọn trái cây của chúng tôi và sử dụng chức năng này:

Và đây là kết quả trong bảng điều khiển: 👇
Lưu ý rằng kết quả được hiển thị sau 2 giây.

Nếu bạn đang tự hỏi làm thế nào chúng tôi chọn dâu tây từ biến chứng khoán của chúng tôi, thì đây là mã có định dạng 👇

Let's add the time and work factors inside our promise using a let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 6 function inside our let order = () =>{}; let production = () =>{}; 9 statement. Follow me 👇

Đừng xóa bất cứ điều gì. Bây giờ chúng tôi sẽ bắt đầu viết chức năng sản xuất của mình với mã sau. Chúng tôi sẽ sử dụng các chức năng mũi tên: In real life, you can avoid the time factor as well. This is completely dependent on the nature of your work.

console.log("I"); // This will be shown after 2 seconds setTimeout(()=>{ console.log("eat"); },2000) console.log("Ice Cream") 7

Và đây là kết quả 👇

console.log("I"); // This will be shown after 2 seconds setTimeout(()=>{ console.log("eat"); },2000) console.log("Ice Cream") 8

Nếu bạn nhớ, đây là các bước của chúng tôi:

Và đây là kết quả 👇

Minh họa về chuỗi lời hứa bằng cách sử dụng. Sau đó, người xử lý

Người xử lý .Then trả lại một lời hứa khi lời hứa ban đầu của chúng tôi được giải quyết.

Đây là một ví dụ:

Hãy để tôi đơn giản hơn: nó tương tự như hướng dẫn cho ai đó. Bạn nói với ai đó "trước tiên làm điều này, sau đó làm điều đó, sau đó điều này, sau đó .., sau đó .., sau đó ..." và cứ thế.

Nhiệm vụ đầu tiên là lời hứa ban đầu của chúng tôi.
Phần còn lại của các nhiệm vụ trả lại lời hứa của chúng tôi một khi một chút công việc được hoàn thành

Hãy thực hiện điều này trong dự án của chúng tôi. Ở dưới cùng của mã của bạn viết các dòng sau. 👇

Lưu ý: Đừng quên viết từ let order = (call_production) =>{ call_production(); }; let production = () =>{}; 1 bên trong trình xử lý let order = (call_production) =>{ call_production(); }; let production = () =>{}; 0 của bạn. Nếu không, nó sẽ không hoạt động đúng. Nếu bạn tò mò, hãy thử xóa trả lại sau khi chúng tôi hoàn thành các bước: don't forget to write the let order = (call_production) =>{ call_production(); }; let production = () =>{}; 1 word inside your let order = (call_production) =>{ call_production(); }; let production = () =>{}; 0 handler. Otherwise, it won't work properly. If you're curious, try removing the return once we finish the steps:

console.log("I"); // This will be shown after 2 seconds setTimeout(()=>{ console.log("eat"); },2000) console.log("Ice Cream") 9

Và đây là kết quả: 👇

Sử dụng cùng một hệ thống, hãy kết thúc dự án của chúng tôi: 👇

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"] } 0

Đây là kết quả: 👇

Xử lý lỗi

Chúng tôi cần một cách để xử lý các lỗi khi có sự cố xảy ra. Nhưng trước tiên, chúng ta cần hiểu chu kỳ hứa hẹn:

Một minh họa về cuộc đời của một lời hứa

Để bắt lỗi của chúng tôi, hãy thay đổi biến của chúng tôi thành Sai.

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"] } 1

Có nghĩa là cửa hàng của chúng tôi đã đóng cửa. Chúng tôi không bán kem cho khách hàng của mình nữa.

Để xử lý việc này, chúng tôi sử dụng trình xử lý let order = (call_production) =>{ call_production(); }; let production = () =>{}; 3. Giống như let order = (call_production) =>{ call_production(); }; let production = () =>{}; 0, nó cũng trả lại một lời hứa, nhưng chỉ khi lời hứa ban đầu của chúng tôi bị từ chối.

Một lời nhắc nhở nhỏ ở đây:

let order = (call_production) =>{ call_production(); }; let production = () =>{}; 0 hoạt động khi một lời hứa được giải quyết
let order = (call_production) =>{ call_production(); }; let production = () =>{}; 3 hoạt động khi một lời hứa bị từ chối

Đi xuống phía dưới và viết mã sau: 👇

Chỉ cần nhớ rằng không có gì giữa trình xử lý let order = (call_production) =>{ call_production(); }; let production = () =>{}; 0 trước đây của bạn và trình xử lý let order = (call_production) =>{ call_production(); }; let production = () =>{}; 3.

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"] } 2

Đây là kết quả: 👇

Một vài điều cần lưu ý về mã này:

Thông điệp đầu tiên đến từ phần let order = (call_production) =>{ call_production(); }; let production = () =>{}; 9 trong lời hứa của chúng tôi
Tin nhắn thứ 2 đến từ trình xử lý let order = (call_production) =>{ call_production(); }; let production = () =>{}; 3

Cách sử dụng trình xử lý .finally ()

Có một thứ gọi là trình xử lý let order = (call_production) =>{ console.log("Order placed. Please call production") // function 👇 is being called call_production(); }; let production = () =>{ console.log("Production has started") }; 1 hoạt động bất kể lời hứa của chúng tôi đã được giải quyết hay bị từ chối.

Ví dụ: cho dù chúng tôi không phục vụ khách hàng hay 100 khách hàng, cửa hàng của chúng tôi sẽ đóng cửa vào cuối ngày whether we serve no customers or 100 customers, our shop will close at the end of the day

Nếu bạn tò mò kiểm tra điều này, hãy đến ở rất dưới cùng và viết mã này: 👇

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"] } 3

Kết quả: 👇

Mọi người, xin vui lòng chào mừng Async / Await ~

Làm thế nào để Async / đang chờ hoạt động trong JavaScript?

Đây được cho là cách tốt hơn để viết lời hứa và nó giúp chúng tôi giữ cho mã của chúng tôi đơn giản và sạch sẽ.

Tất cả bạn phải làm là viết từ let order = (call_production) =>{ console.log("Order placed. Please call production") // function 👇 is being called call_production(); }; let production = () =>{ console.log("Production has started") }; 2 trước bất kỳ chức năng chính quy nào và nó trở thành một lời hứa.

Nhưng trước tiên, hãy nghỉ ngơi

Hãy xem: 👇

Trước khi async/chờ đợi, để thực hiện một lời hứa, chúng tôi đã viết điều này:

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"] } 4

Bây giờ sử dụng async/chờ đợi, chúng tôi viết một cái như thế này:

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"] } 5

Nhưng chờ đã ......

Bạn cần phải hiểu ->

Cách sử dụng từ khóa let order = (call_production) =>{ console.log("Order placed. Please call production") // function 👇 is being called call_production(); }; let production = () =>{ console.log("Production has started") }; 3 và let order = (call_production) =>{ console.log("Order placed. Please call production") // function 👇 is being called call_production(); }; let production = () =>{ console.log("Production has started") }; 4
Cách sử dụng từ khóa đang chờ đợi

Cách sử dụng thử và bắt từ khóa

Chúng tôi sử dụng từ khóa let order = (call_production) =>{ console.log("Order placed. Please call production") // function 👇 is being called call_production(); }; let production = () =>{ console.log("Production has started") }; 3 để chạy mã của chúng tôi trong khi chúng tôi sử dụng let order = (call_production) =>{ console.log("Order placed. Please call production") // function 👇 is being called call_production(); }; let production = () =>{ console.log("Production has started") }; 4 để bắt lỗi. Đó là khái niệm tương tự chúng tôi đã thấy khi chúng tôi xem xét những lời hứa.

Hãy xem một so sánh. Chúng ta sẽ thấy một bản demo nhỏ của định dạng, sau đó chúng ta sẽ bắt đầu mã hóa.

Những lời hứa trong JS -> Giải quyết hoặc từ chối

Chúng tôi đã sử dụng giải quyết và từ chối trong những lời hứa như thế này:

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"] } 6

Async / chờ đợi trong js -> thử, bắt

Khi chúng tôi đang sử dụng Async/Await, chúng tôi sử dụng định dạng này:

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"] } 7

Đừng hoảng sợ, chúng tôi sẽ thảo luận về từ khóa let order = (call_production) =>{ console.log("Order placed. Please call production") // function 👇 is being called call_production(); }; let production = () =>{ console.log("Production has started") }; 7 tiếp theo.

Bây giờ hy vọng bạn hiểu sự khác biệt giữa lời hứa và async / chờ đợi.

Cách sử dụng từ khóa đang chờ của JavaScript

Từ khóa let order = (call_production) =>{ console.log("Order placed. Please call production") // function 👇 is being called call_production(); }; let production = () =>{ console.log("Production has started") }; 7 làm cho JavaScript đợi cho đến khi một lời hứa giải quyết và trả về kết quả của nó.

Cách sử dụng từ khóa đang chờ đợi trong JavaScript

Hãy trở lại cửa hàng kem của chúng tôi. Chúng tôi không biết nên đứng đầu khách hàng có thể thích, sô cô la hoặc đậu phộng. Vì vậy, chúng tôi cần dừng máy của chúng tôi và đi và hỏi khách hàng của chúng tôi những gì họ muốn trên kem của họ.

Lưu ý ở đây rằng chỉ có nhà bếp của chúng tôi bị dừng lại, nhưng nhân viên của chúng tôi bên ngoài nhà bếp vẫn sẽ làm những việc như:

Làm các món ăn
Làm sạch các bàn
nhận đơn đặt hàng, và như vậy.

Một ví dụ về mã từ khóa đang chờ đợi

Chúng ta hãy tạo ra một lời hứa nhỏ để hỏi sử dụng topping nào. Quá trình này mất ba giây.

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"] } 8

Bây giờ, hãy tạo chức năng nhà bếp của chúng tôi với từ khóa Async trước.

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"] } 9

Hãy thêm các tác vụ khác bên dưới cuộc gọi let order = (call_production) =>{ console.log("Order placed. Please call production") // function 👇 is being called call_production(); }; let production = () =>{ console.log("Production has started") }; 9.

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 0

Và đây là kết quả:

Chúng tôi thực sự đang đi ra ngoài nhà bếp của chúng tôi để hỏi khách hàng của chúng tôi, "Lựa chọn topping của bạn là gì?" Trong thời gian đó, những thứ khác vẫn được thực hiện.

Một lần, chúng tôi có được sự lựa chọn topping của họ, chúng tôi vào bếp và hoàn thành công việc.

Ghi chú nhỏ

Khi sử dụng async/ chờ đợi, bạn cũng có thể sử dụng let order = (call_production) =>{ call_production(); }; let production = () =>{}; 0, let order = (call_production) =>{ call_production(); }; let production = () =>{}; 3 và let order = () =>{}; let production = () =>{}; 5 & NBSP; cũng là một phần cốt lõi của những lời hứa.

Hãy mở cửa hàng kem của chúng tôi một lần nữa

Chúng ta sẽ tạo hai chức năng ->

// name 👇 of our second function order(production); 3: để làm kem
// name 👇 of our second function order(production); 4: Để chỉ định lượng thời gian mỗi nhiệm vụ nhỏ sẽ thực hiện.

Hãy bắt đầu! Đầu tiên, tạo hàm thời gian:

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 1

Bây giờ, hãy tạo ra nhà bếp của chúng tôi:

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 2

Hãy đưa ra hướng dẫn nhỏ và kiểm tra nếu chức năng nhà bếp của chúng tôi có hoạt động hay không:

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 3

Kết quả trông như thế này khi cửa hàng mở cửa: 👇

Kết quả trông như thế này khi cửa hàng đóng cửa: 👇

Càng xa càng tốt.

Hãy hoàn thành dự án của chúng tôi.

Đây là danh sách các nhiệm vụ của chúng tôi một lần nữa: 👇

Biểu đồ chứa các bước để làm kem

Đầu tiên, mở cửa hàng của chúng tôi

console.log("I"); // This will be shown after 2 seconds setTimeout(()=>{ console.log("eat"); },2000) console.log("Ice Cream") 3

Bây giờ hãy viết các bước bên trong hàm let order = (call_production) =>{ console.log("Order placed. Please call production") // function 👇 is being called call_production(); }; let production = () =>{ console.log("Production has started") }; 9 của chúng tôi: 👇

let stocks = { Fruits : ["strawberry", "grapes", "banana", "apple"], liquid : ["water", "ice"], holder : ["cone", "cup", "stick"], toppings : ["chocolate", "peanuts"], }; 5

Và đây là kết quả: 👇

Sự kết luận

Xin chúc mừng đã đọc cho đến khi kết thúc! Trong bài viết này bạn đã học:

Sự khác biệt giữa các hệ thống đồng bộ và không đồng bộ
Các cơ chế của JavaScript không đồng bộ bằng cách sử dụng 3 kỹ thuật (gọi lại, lời hứa và async/ chờ đợi)

Đây là huy chương của bạn để đọc cho đến khi kết thúc. ❤

Đề xuất và phê bình được đánh giá cao ❤

YouTube / Joy Shaheb

LinkedIn / Joyshaheb

Twitter / Joyshaheb

Instagram / Joyshaheb

Tín dụng

Bộ sưu tập tất cả các hình ảnh được sử dụng
Unicorns, Kitty Avatar
con mèo tabby, người phụ nữ chiêm tinh học, hoa cúc girl
Cảm xúc nhân vật

Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Đây là những gì chúng tôi sẽ đề cập trong bài viết này:

Bạn cũng có thể xem hướng dẫn này trên YouTube nếu bạn thích:

JavaScript không đồng bộ là gì?

JavaScript không đồng bộ đồng bộ

Cách gọi lại hoạt động trong JavaScript

Lý thuyết về JavaScript Async giúp bạn chia các dự án phức tạp lớn thành các nhiệm vụ nhỏ hơn.

Hãy nghĩ về điều này như thể bạn chỉ có một tay để hoàn thành 10 nhiệm vụ. Vì vậy, bạn phải hoàn thành một nhiệm vụ tại một thời điểm.

Hệ thống không đồng bộ là gì?

Ở đây, hãy tưởng tượng rằng trong 10 nhiệm vụ, bạn có 10 tay. Vì vậy, mỗi bàn tay có thể thực hiện mỗi nhiệm vụ một cách độc lập và cùng một lúc.

Để tóm tắt các JS không đồng bộ đồng bộ: JS không đồng bộ:

Trước khi bắt đầu dự án của chúng tôi, chúng ta hãy xem xét một số ví dụ và làm rõ mọi nghi ngờ.

Đây là kết quả trong bảng điều khiển: 👇

Bây giờ bạn đã biết sự khác biệt giữa các hoạt động đồng bộ và async, hãy xây dựng cửa hàng kem của chúng tôi.

Một ví dụ về một cuộc gọi lại

Hãy xem ví dụ này: 👇

Hãy làm một bài kiểm tra nhỏ

Nghỉ ngơi một lát

Xóa bảng điều khiển.log

Nếu bạn đang tự hỏi làm thế nào chúng tôi chọn dâu tây từ biến chứng khoán của chúng tôi, thì đây là mã có định dạng 👇

Nghỉ ngơi một lát

Lưu ý rằng kết quả được hiển thị sau 2 giây.

Đừng xóa bất cứ điều gì. Bây giờ chúng tôi sẽ bắt đầu viết chức năng sản xuất của mình với mã sau. Chúng tôi sẽ sử dụng các chức năng mũi tên:

Và đây là kết quả 👇

Đây là một ví dụ:

Xử lý lỗi

Cách sử dụng trình xử lý .finally ()

Làm thế nào để Async / đang chờ hoạt động trong JavaScript?

Nhưng trước tiên, hãy nghỉ ngơi

Nhưng chờ đã ......

Cách sử dụng thử và bắt từ khóa

Những lời hứa trong JS -> Giải quyết hoặc từ chối

Async / chờ đợi trong js -> thử, bắt

Cách sử dụng từ khóa đang chờ của JavaScript

Cách sử dụng từ khóa đang chờ đợi trong JavaScript

Một ví dụ về mã từ khóa đang chờ đợi

Ghi chú nhỏ

Hãy mở cửa hàng kem của chúng tôi một lần nữa

Sự kết luận

Đề xuất và phê bình được đánh giá cao ❤

Tín dụng

Bài Viết Liên Quan

Toplist

Bài mới nhất

Chủ đề