Tìm hiểu về Async/Await trong JavaScript: Tìm hiểu sâu hơn về thời gian đầu ra

Làm rõ hành vi không đồng bộ/chờ đợi của JavaScript trong thời gian

Trong phát triển JavaScript hiện đại, không đồng bộ/đang chờ đã trở thành một công cụ thiết yếu để xử lý mã không đồng bộ. Mặc dù tính hữu dụng của nó nhưng nhiều nhà phát triển vẫn gặp phải sự nhầm lẫn khi dự đoán thời gian chính xác của kết quả đầu ra trong các hàm sử dụng các kỹ thuật này. Điều này đặc biệt đúng trong các đánh giá mã hóa như đánh giá của Adaface, trong đó việc hiểu rõ luồng hoạt động không đồng bộ là rất quan trọng.

Vấn đề bạn đang giải quyết trình bày hai hàm không đồng bộ với các hành vi có vẻ giống nhau nhưng kết quả lại khác nhau về mặt thời gian. Thoạt nhìn, cả hai chức năng này đều có vẻ mất 10 giây, nhưng câu trả lời thực tế khiến nhiều nhà phát triển ngạc nhiên vì nó liên quan đến sự hiểu biết sâu sắc hơn về cách giải quyết các lời hứa.

Bài viết này nhằm mục đích hướng dẫn bạn mã, chia nhỏ cách thức không đồng bộ Và chờ đợi cơ chế hoạt động cũng như thứ tự giải quyết lời hứa ảnh hưởng đến kết quả cuối cùng như thế nào. Khi kết thúc phần này, bạn sẽ hiểu rõ hơn về cách hoạt động của thời gian trong JavaScript không đồng bộ.

Hãy đi sâu vào mã để hiểu lý do tại sao hàm đầu tiên xuất ra 24 sau 5 giây và chức năng thứ hai cũng xuất ra 24 nhưng với cấu trúc lời hứa khác. Với kiến ​​thức này, bạn sẽ được trang bị tốt hơn cho các đánh giá phỏng vấn sắp tới của mình.

Khám phá các hoạt động không đồng bộ trong JavaScript

Các tập lệnh được cung cấp thể hiện sức mạnh của hoạt động không đồng bộ trong JavaScript bằng cách sử dụng không đồng bộ Và chờ đợi từ khóa. Ý tưởng chính là xử lý các tác vụ không đồng bộ như các hoạt động bị trì hoãn một cách hiệu quả. Trong cả hai ví dụ, hàm sau5s(x) mô phỏng độ trễ 5 giây bằng cách trả lại lời hứa được giải quyết bằng giá trị x. Độ trễ này là cần thiết để hiểu được trình tự hoạt động và cách các lời hứa tương tác với luồng của chức năng.

Trong chức năng đầu tiên, nhiều(đầu vào), mã sẽ tuần tự chờ hai lời hứa được giải quyết. các chờ đợi từ khóa đảm bảo rằng mã tạm dừng thực thi cho đến khi lời hứa được trả lại bởi sau5 giây(3) được giải quyết. Sau đó, sau khi lời hứa đầu tiên được giải quyết, mã sẽ đợi thêm 5 giây nữa cho lời hứa thứ hai sau5 giây(4) để giải quyết. Điều này dẫn đến tổng thời gian chờ là 10 giây trước khi thực hiện tính toán. Việc nhân đầu vào với cả hai giá trị được giải quyết sẽ cho ra kết quả cuối cùng.

Chức năng thứ hai, giây_mult(đầu vào), cải thiện hiệu suất bằng cách bắt đầu đồng thời cả hai lời hứa. Bằng cách gán sau5 giây(3) Và sau5 giây(4) vào các biến trước khi áp dụng chờ đợi, cả hai lời hứa đều chạy song song. Khi mã đạt tới chờ đợi tuyên bố, nó chờ cả hai lời hứa được giải quyết, nhưng chúng đã được tiến hành, giảm tổng thời gian chờ xuống chỉ còn 5 giây. Việc thực thi đồng thời này nêu bật tầm quan trọng của việc tối ưu hóa các hoạt động không đồng bộ.

Các tập lệnh này minh họa cách sử dụng async và wait để xử lý mã không đồng bộ một cách rõ ràng. Hiểu thời điểm chạy các tác vụ không đồng bộ đồng thời hoặc tuần tự là rất quan trọng để tối ưu hóa hiệu suất. các giây_mult Cách tiếp cận của hàm cho thấy lợi ích của việc tránh sự chậm trễ không cần thiết, trong khi ví dụ đầu tiên rất hữu ích khi các hoạt động phải diễn ra theo một thứ tự cụ thể. Cả hai ví dụ đều có thể áp dụng rộng rãi trong các tình huống thực tế trong đó xử lý lời hứa là bắt buộc, chẳng hạn như tìm nạp dữ liệu từ API hoặc thực hiện các hoạt động phụ thuộc vào tài nguyên bên ngoài.

function after5s(x) {
  return new Promise(res => {
    setTimeout(() => {
      res(x);
    }, 5000);
  });
}

// First approach using async/await with sequential waits
async function mult(input) {
  const f = await after5s(3);
  const g = await after5s(4);
  return input * f * g;
}

// Calling the function and handling the promise resolution
mult(2).then(value => {
  console.log(value); // Output: 24 after 10 seconds
});

function after5s(x) {
  return new Promise(res => {
    setTimeout(() => {
      res(x);
    }, 5000);
  });
}

// Second approach optimizing by starting both promises concurrently
async function second_mult(input) {
  const f = after5s(3); // Starts promise immediately
  const g = after5s(4); // Starts second promise concurrently
  return input * await f * await g;
}

// Calling the function and handling the promise resolution
second_mult(2).then(value => {
  console.log(value); // Output: 24 after 5 seconds
});

Nắm vững các mẫu không đồng bộ trong JavaScript

Một trong những khái niệm quan trọng nhất trong JavaScript hiện đại là cách xử lý hiệu quả các tác vụ không đồng bộ. Trong khi không đồng bộ/đang chờ cú pháp đơn giản hóa khả năng đọc của mã không đồng bộ, có những yếu tố khác mà nhà phát triển phải xem xét. Một khía cạnh quan trọng của việc sử dụng hàm async là hiểu cách JavaScript quản lý vòng lặp sự kiện và ngăn xếp cuộc gọi không đồng bộ. Vòng lặp sự kiện cho phép JavaScript thực thi đồng thời nhiều tác vụ, ngay cả trong môi trường đơn luồng, bằng cách đẩy các tác vụ không chặn, chẳng hạn như lời hứa, vào hàng đợi và tiếp tục thực thi mã khác.

Một yếu tố thường bị bỏ qua trong hoạt động không đồng bộ là xử lý lỗi. Bằng cách sử dụng cú pháp async/await, các nhà phát triển có thể gói mã của họ trong một thử...bắt khối để quản lý việc từ chối lời hứa và các lỗi khác một cách khéo léo. Phương pháp này đảm bảo rằng mọi lỗi xảy ra trong hoạt động không đồng bộ đều được phát hiện và xử lý mà không làm gián đoạn luồng chương trình. Các hàm không đồng bộ không chỉ cải thiện hiệu suất mà còn giúp việc xử lý lỗi phức tạp hiệu quả hơn và dễ gỡ lỗi hơn.

Một lĩnh vực trọng tâm khác là làm thế nào Hứa.tất cả có thể được sử dụng để xử lý đồng thời nhiều lời hứa. Không giống như việc chờ đợi các lời hứa một cách tuần tự như trong ví dụ đầu tiên, Hứa.tất cả thực hiện đồng thời tất cả các lời hứa, trả về kết quả trong một mảng. Phương pháp này cực kỳ hữu ích khi thực hiện nhiều lệnh gọi API hoặc thực hiện một số tác vụ trong đó thứ tự thực hiện không quan trọng. Hiểu cách cấu trúc các tác vụ đồng thời một cách chính xác là rất quan trọng để viết mã JavaScript tối ưu và có thể mở rộng.