Nắm vững Async/Await: Xử lý chuỗi chức năng không đồng bộ trong JavaScript

Xử lý chuỗi hàm không đồng bộ trong JavaScript

Hoạt động không đồng bộ là một phần quan trọng của lập trình JavaScript hiện đại, cho phép thực thi không chặn trong các môi trường như trình duyệt và Node.js. Tuy nhiên, việc quản lý luồng các hàm không đồng bộ gọi lẫn nhau có thể khó khăn, đặc biệt khi bạn muốn đợi hàm cuối cùng trong chuỗi mà không làm tạm dừng toàn bộ quá trình.

Trong trường hợp này, chúng tôi thường dựa vào JavaScript không đồng bộ/đang chờ Và Lời hứa để xử lý các luồng không đồng bộ phức tạp. Nhưng có những trường hợp khi sử dụng Promise hoặc chờ đợi từng lệnh gọi hàm là không phù hợp, chẳng hạn như khi chương trình phải tiếp tục thực thi mà không chờ phản hồi ngay lập tức. Điều này đặt ra một thách thức mới cho các nhà phát triển.

Ví dụ bạn cung cấp cho thấy một tình huống phổ biến trong đó một số hàm được kích hoạt không đồng bộ và chúng ta cần một cách để phát hiện khi nào hàm cuối cùng được gọi. Việc sử dụng Promise truyền thống ở đây có thể bị hạn chế vì nó dừng chức năng gọi, buộc nó phải đợi kết quả thay vì tiếp tục luồng.

Trong bài viết này, chúng ta sẽ khám phá cách giải quyết vấn đề này bằng JavaScript không đồng bộ/đang chờ cơ chế. Chúng ta sẽ xem xét một cách tiếp cận thực tế để đảm bảo chức năng chính có thể tiếp tục mà không cần chờ đợi trực tiếp, trong khi vẫn hoàn thành chức năng cuối cùng trong chuỗi.

Hiểu cách xử lý chức năng không đồng bộ với Async/Await và Callbacks

Kịch bản đầu tiên sử dụng không đồng bộ/đang chờ để quản lý việc thực thi chức năng không đồng bộ. các không đồng bộ từ khóa cho phép các hàm trả về một lời hứa, giúp xử lý tuần tự các hoạt động không đồng bộ dễ dàng hơn. Trong trường hợp này, functionFirst chịu trách nhiệm gọi functionSecond không đồng bộ bằng cách sử dụng setTimeout. Mặc dù functionFirst không đợi functionSecond kết thúc, chúng ta vẫn sử dụng chờ đợi trong functionMain để đảm bảo rằng luồng chính chờ hoàn thành tất cả các hoạt động không đồng bộ trước khi tiếp tục. Điều này giúp kiểm soát tốt hơn luồng sự kiện không đồng bộ trong khi vẫn duy trì hành vi không chặn trong JavaScript.

Ưu điểm chính của phương pháp này là chúng ta có thể xử lý các luồng không đồng bộ phức tạp mà không chặn việc thực thi các chức năng khác. Thay vì buộc chương trình phải đợi ở mọi lệnh gọi hàm, async/await cho phép mã tiếp tục thực thi trong khi chờ các lời hứa được giải quyết ở chế độ nền. Điều này cải thiện hiệu suất và giữ cho giao diện người dùng phản hồi nhanh trong các ứng dụng front-end. Độ trễ trong mỗi chức năng mô phỏng một tác vụ không đồng bộ thực tế, chẳng hạn như yêu cầu máy chủ hoặc truy vấn cơ sở dữ liệu. Cơ chế Promise giải quyết khi tất cả các chức năng trong chuỗi được thực thi, đảm bảo câu lệnh nhật ký cuối cùng chỉ xuất hiện sau khi mọi thứ đã hoàn tất.

Trong giải pháp thứ hai, chúng tôi sử dụng cuộc gọi lại để đạt được luồng không đồng bộ không chặn tương tự. Khi functionFirst được gọi, nó sẽ kích hoạt functionSecond và ngay lập tức trả về mà không cần đợi hoàn thành. Hàm gọi lại được truyền dưới dạng đối số giúp kiểm soát luồng bằng cách kích hoạt hàm tiếp theo trong chuỗi khi hàm hiện tại kết thúc. Mẫu này đặc biệt hữu ích trong các môi trường mà chúng ta cần kiểm soát trực tiếp hơn thứ tự thực hiện mà không sử dụng lời hứa hoặc async/await. Tuy nhiên, các lệnh gọi lại có thể dẫn đến “địa ngục gọi lại” khi xử lý các chuỗi hoạt động không đồng bộ sâu.

Cuối cùng, giải pháp thứ ba sử dụng Trình tạo sự kiện Node.js để xử lý các cuộc gọi không đồng bộ theo cách phức tạp hơn. Bằng cách phát ra các sự kiện tùy chỉnh sau khi mỗi chức năng không đồng bộ kết thúc, chúng tôi có toàn quyền kiểm soát thời điểm kích hoạt chức năng tiếp theo. Lập trình hướng sự kiện đặc biệt hiệu quả trong môi trường phụ trợ, vì nó cho phép mã có thể mở rộng và bảo trì dễ dàng hơn khi xử lý nhiều hoạt động không đồng bộ. các phát ra phương thức gửi tín hiệu khi các sự kiện cụ thể xảy ra và trình nghe xử lý các sự kiện này một cách không đồng bộ. Phương pháp này đảm bảo rằng chức năng chính chỉ tiếp tục sau khi chức năng cuối cùng trong chuỗi được thực thi, cung cấp cách tiếp cận mô-đun hơn và có thể tái sử dụng để quản lý tác vụ không đồng bộ.

// Solution 1: Using async/await with Promises in JavaScript
async function functionFirst() {
  console.log('First is called');
  setTimeout(functionSecond, 1000);
  console.log('First fired Second and does not wait for its execution');
  return new Promise(resolve => {
    setTimeout(resolve, 2000); // Set timeout for the entire chain to complete
  });
}

function functionSecond() {
  console.log('Second is called');
  setTimeout(functionLast, 1000);
}

function functionLast() {
  console.log('Last is called');
}

async function functionMain() {
  await functionFirst();
  console.log('called First and continue only after Last is done');
}

functionMain();

// Solution 2: Using Callbacks to Manage Asynchronous Flow Without Blocking
function functionFirst(callback) {
  console.log('First is called');
  setTimeout(() => {
    functionSecond(callback);
  }, 1000);
  console.log('First fired Second and does not wait for its execution');
}

function functionSecond(callback) {
  console.log('Second is called');
  setTimeout(() => {
    functionLast(callback);
  }, 1000);
}

function functionLast(callback) {
  console.log('Last is called');
  callback();
}

function functionMain() {
  functionFirst(() => {
    console.log('called First and continue only after Last is done');
  });
}

functionMain();

// Solution 3: Using Node.js EventEmitter to Handle Asynchronous Functions
const EventEmitter = require('events');
const eventEmitter = new EventEmitter();

function functionFirst() {
  console.log('First is called');
  setTimeout(() => {
    eventEmitter.emit('secondCalled');
  }, 1000);
  console.log('First fired Second and does not wait for its execution');
}

function functionSecond() {
  console.log('Second is called');
  setTimeout(() => {
    eventEmitter.emit('lastCalled');
  }, 1000);
}

function functionLast() {
  console.log('Last is called');
}

eventEmitter.on('secondCalled', functionSecond);
eventEmitter.on('lastCalled', functionLast);

function functionMain() {
  functionFirst();
  eventEmitter.on('lastCalled', () => {
    console.log('called First and continue only after Last is done');
  });
}

functionMain();

Các kỹ thuật nâng cao để quản lý việc thực thi hàm không đồng bộ trong JavaScript

Trong khi sử dụng không đồng bộ/đang chờ Và cuộc gọi lại có hiệu quả để xử lý các luồng không đồng bộ trong JavaScript, một công cụ mạnh mẽ khác đáng được chú ý là việc sử dụng JavaScript máy phát điện kết hợp với chức năng không đồng bộ. Chức năng tạo cho phép bạn trao lại quyền kiểm soát cho người gọi, khiến nó trở nên hoàn hảo để xử lý các quy trình lặp lại. Bằng cách ghép máy phát điện với Lời hứa, bạn có thể tạm dừng và tiếp tục thực thi theo cách được kiểm soát chặt chẽ hơn, mang lại mức độ linh hoạt khác cho quy trình làm việc không đồng bộ.

Trình tạo có thể đặc biệt hữu ích trong các tình huống mà bạn cần kiểm soát chi tiết hơn đối với lệnh gọi hàm không đồng bộ. Chúng hoạt động bằng cách cho phép bạn thực hiện tại các điểm cụ thể và chờ tín hiệu bên ngoài hoặc giải pháp hứa hẹn tiếp tục. Điều này hữu ích trong trường hợp bạn có sự phụ thuộc phức tạp giữa các hàm hoặc yêu cầu các thao tác không chặn qua nhiều bước. Mặc dù không đồng bộ/đang chờ thường đơn giản hơn, việc sử dụng trình tạo sẽ mang lại cho bạn khả năng kiểm soát luồng không đồng bộ theo cách tùy chỉnh hơn.

Một cân nhắc quan trọng khác là xử lý lỗi trong mã không đồng bộ. Không giống như các hoạt động đồng bộ, các lỗi trong hàm không đồng bộ phải được khắc phục thử/bắt khối hoặc bằng cách xử lý những lời hứa bị từ chối. Điều quan trọng là luôn đưa tính năng xử lý lỗi thích hợp vào quy trình làm việc không đồng bộ của bạn, vì điều này đảm bảo rằng nếu một chức năng trong chuỗi bị lỗi thì nó sẽ không làm hỏng toàn bộ ứng dụng. Việc thêm cơ chế ghi nhật ký vào hoạt động không đồng bộ của bạn cũng sẽ cho phép bạn theo dõi hiệu suất và chẩn đoán sự cố trong các luồng không đồng bộ phức tạp.