JavaScript: JavaScript Promise.all()

Giới thiệu về phương thức Promise.all() của JavaScript

Phương thức tĩnh Promise.all() lấy một đối tượng lặp lại của các promise:

Promise.all(iterable);

Phương thức này trả về một promise duy nhất được giải quyết khi tất cả các promise đầu vào đã được giải quyết. Promise được trả về giải quyết thành một mảng các kết quả của các promise đầu vào.

Trong sơ đồ này, promise1 được giải quyết thành giá trị v1 tại thời điểm t1 và promise2 được giải quyết thành giá trị v2 tại thời điểm t2. Do đó, Promise.all(promise1, promise2) trả về một promise được giải quyết thành một mảng chứa kết quả của promise1 và promise2 [v1, v2] tại thời điểm t2.

Nói cách khác, Promise.all() chờ tất cả các promise đầu vào được giải quyết và trả về một promise mới giải quyết thành một mảng chứa kết quả của các promise đầu vào.

Nếu một trong những promise đầu vào bị từ chối, phương thức Promise.all() sẽ ngay lập tức trả về một promise bị từ chối với lỗi của promise bị từ chối đầu tiên:

Trong sơ đồ trên, promise2 bị từ chối tại thời điểm t1 với một lỗi. Do đó, Promise.all() trả về một promise mới bị từ chối ngay lập tức với cùng một lỗi. Ngoài ra, Promise.all() không quan tâm đến các promise đầu vào khác, liệu chúng sẽ được giải quyết hay bị từ chối.

Trong thực tế, Promise.all() rất hữu ích cho việc tổng hợp kết quả từ nhiều hoạt động không đồng bộ.

Ví dụ về phương thức JavaScript Promise.all()

Chúng ta hãy lấy một số ví dụ để hiểu cách phương pháp Promise.all() hoạt động.

1) Ví dụ về promise đã giải quyết

Các promise sau đây được giải quyết thành 10, 20 và 30 sau 1, 2 và 3 giây. Chúng tôi sử dụng setTimeout() để mô phỏng các hoạt động không đồng bộ:

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('The first promise has resolved');
    resolve(10);
  }, 1 * 1000);
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('The second promise has resolved');
    resolve(20);
  }, 2 * 1000);
});

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('The third promise has resolved');
    resolve(30);
  }, 3 * 1000);
});

Promise.all([p1, p2, p3]).then((results) => {
  const total = results.reduce((p, c) => p + c);

  console.log(`Results: ${results}`);
  console.log(`Total: ${total}`);
});

Output

The first promise has resolved
The second promise has resolved
The third promise has resolved
Results: 10,20,30
Total: 60

Khi tất cả các promise đã được giải quyết, các giá trị từ những promise này sẽ được truyền vào hàm callback của phương thức then() dưới dạng một mảng.

Bên trong hàm callback, chúng ta sử dụng phương thức Array.reduce() để tính tổng giá trị và sử dụng console.log để hiển thị mảng giá trị cũng như tổng.

2) Ví dụ về promise bị từ chối

Promise.all() trả về một promise bị từ chối nếu bất kỳ promise đầu vào nào bị từ chối.

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('The first promise has resolved');
        resolve(10);
    }, 1 * 1000);
});

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('The second promise has rejected');
        reject('Failed');
    }, 2 * 1000);
});

const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('The third promise has resolved');
        resolve(30);
    }, 3 * 1000);
});

Promise.all([p1, p2, p3])
    .then(console.log) // không bao giờ thực thi
    .catch(console.log);

Output

The first promise has resolved
The second promise has rejected
Failed
The third promise has resolved

Trong ví dụ trên, chúng ta có ba promise: promise đầu tiên được giải quyết sau 1 giây, promise thứ hai bị từ chối sau 2 giây và promise thứ ba được giải quyết sau 3 giây.

Kết quả là promise trả về bị từ chối vì promise thứ hai bị từ chối. Phương thức catch() được thực thi để hiển thị lý do cho promise bị từ chối.

Bản tóm tắt

• Phương thức Promise.all() chấp nhận một danh sách các promise và trả về một promise mới được giải quyết thành một mảng kết quả của các promise đầu vào nếu tất cả các promise đầu vào được giải quyết hoặc bị từ chối với lỗi của promise bị từ chối đầu tiên.
• Sử dụng phương thức Promise.all() để tổng hợp kết quả từ nhiều hoạt động không đồng bộ.