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"],
 };

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.

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

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.

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: 👇

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"],
 };

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"],
 };

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

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

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

// 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.

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"],
 };

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")

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

Chúng tôi sẽ tổ chức năng

let order = () =>{};

let production = () =>{};

let order = () =>{};

let production = () =>{};

console.log("I");

// This will be shown after 2 seconds

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")

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

Chúng tôi sẽ tổ chức năng

let order = () =>{};

let production = () =>{};

let order = () =>{};

let production = () =>{};

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.

console.log("I");

// This will be shown after 2 seconds

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")

Để 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"],
 };

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:

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.

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ố. 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ả 👇

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.

console.log("I");

// This will be shown after 2 seconds

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")

Để 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"],
 };

console.log("I");

// This will be shown after 2 seconds

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")

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")

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.

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"],
 };

let order = () =>{};

let production = () =>{};

Đừ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")

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")

Chúng tôi sẽ tổ chức năng

let order = () =>{};

let production = () =>{};

let order = () =>{};

let production = () =>{};

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

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

Chúng tôi sẽ tổ chức năng

let order = () =>{};

let production = () =>{};

let order = () =>{};

let production = () =>{};

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 = () =>{};

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

console.log("I");

// This will be shown after 2 seconds

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")

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"]
 }

Đâ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:

Để 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"]
 }

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 = () =>{};

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

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 = () =>{};

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

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

Đâ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")

};

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"]
 }

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")

};

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"]
 }

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"]
 }

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")

};

let order = (call_production) =>{

console.log("Order placed. Please call production")

// function 👇 is being called 
  call_production();
};

let production = () =>{

console.log("Production has started")

};

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"]
 }

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"]
 }

Đừ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")

};

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")

};

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"]
 }

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"]
 }

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")

};

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

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 = () =>{};

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

let order = () =>{};

let production = () =>{};

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"],
 };

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"],
 };

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"],
 };

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: 👇

Đầ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")

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")

};

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

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