Hãy dừng việc sử dụng Promise.all() trong JavaScript một cách không có chủ đích bạn nhé, tại sao tôi lại nói thế, hãy đọc bài này thật kỹ nhé.

Promises trong JavaScript là gì?

Nếu bạn đã tình cờ đọc bài viết này, có lẽ bạn đã quen với các promise. Tuy nhiên, đối với những người mới tiếp xúc với JavaScript, hãy cùng tìm hiểu. Đơn giản, một đối tượng Promise biểu thị việc hoàn thành hoặc thất bại của một thao tác không đồng bộ. Điều đặc biệt là giá trị của nó có thể không có sẵn ngay khi promise được tạo ra.

Có 3 trạng thái:

Khi một promise đã được xử lý xong, bạn có thể sử dụng .then() để xử lý kết quả và .catch() để quản lý bất kỳ lỗi nào xảy ra trong quá trình thực thi của nó.

Hiểu chính xác về Promise.all()

Khi xử lý nhiều promise đồng thời, bạn có thể tận dụng phương thức Promise.all([]) có sẵn. Phương thức này nhận vào một mảng các promise và trả về một promise kết hợp. Quan trọng nhất, promise kết hợp này chỉ hoàn thành nếu tất cả các promise đầu vào hoàn thành thành công. Nếu có ít nhất một promise thất bại, toàn bộ promise sẽ bị từ chối. Dưới đây là một ví dụ:

Thường được sử dụng khi làm việc với các hoạt động bất đồng bộ không phụ thuộc vào nhau và bạn muốn biết kết quả của từng hoạt động đó.

Tại Sao Chúng Ta Nên Dùng Promise.allSettled()

Nói một cách tổng quát, việc sử dụng Promise.allSettled() thay vì Promise.all() sẽ có những ưu điểm trong hầu hết các trường hợp thông thường:

Kết quả Toàn Diện

Việc Promise.all() từ chối ngay lập tức nếu bất kỳ promise nào trong mảng promise bị từ chối có thể làm cho việc xác định trạng thái của các promise khác trở nên khó khăn, đặc biệt là khi các promise khác đã được giải quyết thành công. Sử dụng Promise.allSettled([]) có thể cung cấp cho bạn cái nhìn toàn diện về kết quả.

Xử lý lỗi một cách linh hoạt

Phương pháp "fail-fast" của Promise.all() có hạn chế khi bạn muốn tiếp tục bất kể việc khi một trong số chúng thất bại, trong khi Promise.allSettled() cho phép bạn xử lý kết quả của từng promise một cách riêng biệt.

Xử lý các hoạt động đồng thời

Khi cần xử lý các hoạt động đồng thời, bạn có thể không muốn toàn bộ batch thất bại chỉ vì một hoạt động bị lỗi.

Đưa ra quyết định tốt hơn

Khi sử dụng Promise.allSettled(), bạn có thể ra quyết định thông minh hơn sau khi có được kết quả của tất cả các promise. Ví dụ, khi bạn đang lấy dữ liệu từ các API khác nhau và một trong số chúng thất bại, bạn có thể quyết định liệu bạn nên tiếp tục lấy dữ liệu hay cung cấp thông báo lỗi với một thông báo lỗi cụ thể.

Tăng cường trải nghiệm người dùng

Thường thì việc cung cấp kết quả một phần với thông báo lỗi nếu cần thiết sẽ tốt hơn cho UX, thay vì làm thất bại toàn bộ hoạt động với một thông báo tổng quát. Promise.allSettled() làm cho cách tiếp cận này dễ dàng thực hiện.

Ví dụ:

Bạn đang quản lý 1 lớp học trực tuyến, bạn cần kiểm tra 1 danh sách học sinh có mặt trong lớp hay không. Không thể vì 1 học sinh không có mặt mà đưa ra thông báo không có học sinh nào có mặt đúng không. Thay vào đó chúng ta có thể đưa ra thông báo "Học sinh A không có mặt". Điều này sẽ tốt hơn cho trải nghiệm người dùng.