Cách sử dụng Từ khóa Async/Await với Array.Map trong React
Từ khóa async/await là một tính năng mạnh mẽ trong nhiều ngôn ngữ lập trình, bao gồm JavaScript, C# và Python, cho phép bạn viết mã không đồng bộ theo cách ngắn gọn và có cấu trúc hơn.
Array.map() là một phương thức tích hợp sẵn trong JavaScript cho phép bạn lặp lại một mảng và áp dụng một hàm cho từng phần tử, tạo một mảng mới với biến đổi các phần tử. Đây là một công cụ mạnh mẽ để thao tác và chuyển đổi dữ liệu.
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách sử dụng cú pháp async/await với hàm Array.map có sẵn cho tất cả các mảng trong JavaScript. Bạn sẽ tìm hiểu cách dễ dàng thực thi song song nhiều đoạn mã không đồng bộ bằng cách sử dụng JavaScript thuần túy.
Tổng quan về không đồng bộ/Đang chờ
Từ khóa async/await là một cơ chế tuyệt vời để lập mô hình luồng điều khiển không đồng bộ trong các chương trình máy tính. Trong JavaScript, những từ khóa này là "cú pháp đường" ngoài những lời hứa—chúng loại bỏ mọi cuộc gọi bạn cần thực hiện tới Promise.then. Trong đoạn mã sau, bạn có thể xem ví dụ về hàm không đồng bộ trong thành phần React:
...
executeLongRunningTask = async () => {
const response = await fetch(this.taskUrl);
return await response.json();
}
...Đoạn mã trên tìm nạp một số JSON từ API. Bạn có thể thấy từ khóa async được sử dụng trước phần khai báo hàm. Điều này cho phép bạn sử dụng từ khóa await để giải quyết đồng bộ các lời hứa trong hàm. Khi bạn sử dụng từ khóa await, bạn được đảm bảo rằng việc thực thi chức năng của bạn sẽ tạm dừng cho đến khi await hoàn thành việc giải quyết lời hứa của bạn.
Bây giờ bạn đã biết và hiểu cách sử dụng cú pháp async/await, hãy xem cách bạn có thể sử dụng nó với Array.map để soạn nhiều tác vụ chạy dài.< /span>
Sử dụng các hàm không đồng bộ với Array.map
Array.map là một hàm có sẵn trên hệ thống phân cấp nguyên mẫu Array. Về cơ bản, điều này có nghĩa là bất kỳ mảng JavaScript nào cũng có quyền truy cập vào hàm map. Hàm này nhận một hàm làm đối số và gọi hàm đã cho cho từng mục trong mảng, trả về một giá trị cho mỗi mục được lặp lại. Điều mạnh mẽ ở đây là bạn có thể sử dụng Array.map với hàm không đồng bộ để tạo ra một loạt lời hứa! Điều này có nghĩa là bạn có thể lặp lại các mục trong một mảng và trả lại lời hứa cho từng mục này một cách ngắn gọn và dễ đọc. Trong đoạn mã bên dưới, bạn có thể thấy hàm được cập nhật bao gồm nhiều tác vụ chạy dài.
...
private taskUrls = [taskOneUrl, taskTwoUrl, taskThreeUrl];
executeLongRunningTask = async (url) => {
return await fetch(url).then(response => response.json());
}
executeAllLongRunningTasks = async () => {
return await Promise.all(taskUrls.map(this.executeLongRunningtask);
}
...Như bạn có thể thấy, trong đoạn mã trên, hàm async executeLongRunningTask được chuyển vào lệnh gọi map, lệnh gọi này sẽ ánh xạ qua danh sách các URL tác vụ . Đối với mỗi URL này, một lời hứa sẽ được trả lại. Vào cuối quá trình lặp lại này, một loạt các lời hứa sẽ được tạo ra. Điều này cho phép sử dụng Promise.all, cố gắng giải quyết song song mọi lời hứa trong một mảng và tự giải quyết khi tất cả lời hứa trong đó hoàn tất.
Bây giờ bạn có thể sử dụng hàm executeAllLongRunningTasks này để ghi lại mảng phản hồi tác vụ đã giải quyết mới vào bảng điều khiển như thế này:
...
this.executeAllLongRunningTasks().then(console.log);
...Hoặc, nếu bạn muốn sử dụng nó trong hàm async hoặc mô-đun async cấp cao nhất:
...
const tasks = await this.executeAllLongRunningTasks();
console.log(tasks);
...Từ khóa async/await là một phương tiện lý luận cực kỳ mạnh mẽ về mã không đồng bộ. Sử dụng chúng sẽ làm cho mã của bạn dễ đọc hơn và do đó dễ bảo trì hơn. Khi sử dụng async/await cùng với Array.map, bạn có một phương tiện mạnh mẽ để thực thi nhiều hàm không đồng bộ theo trình tự hoặc song song.