Cách chạy hàm sau khi hai hàm bất đồng bộ hoàn tất - JavaScript

Giả sử chúng ta có một mảng chứa hai phần tử, cả hai đều là các hàm bất đồng bộ. Chúng ta cần thực hiện một công việc nào đó, ví dụ in ra console (dùng cho mục đích minh họa), khi cả hai hàm bất đồng bộ đều đã hoàn thành thực thi.

Làm thế nào để tiếp cận bài toán này?

Có hai cách cơ bản để thực hiện tác vụ khi hoàn thành các tác vụ bất đồng bộ:

• Sử dụng Promise
• Sử dụng hàm async/await

Tuy nhiên, khi code phải xử lý nhiều hàm bất đồng bộ (nhiều hơn một), phương thức Promise.all của cách đầu tiên có ưu thế hơn so với cách sau.

Ví dụ

Dưới đây là đoạn code minh họa:

const arr = [ 
  new Promise((resolve, reject) => { 
    setTimeout(() => { 
      resolve('func1 fired!'); 
    }, 2000); 
  }), 
  new Promise((resolve, reject) => { 
    setTimeout(() => { 
      resolve('func2 fired'); 
    }, 3000); 
  }) 
]; 
const lastFunction = () => { 
  console.log('this function should be fired at the very last'); 
}; 
Promise.all([arr[0], arr[1]]).then((resp) => { 
  console.log(resp); 
  lastFunction(); 
}).catch((err) => { 
  console.log('something unexpected happened'); 
})

Kết quả

Đoạn code này sẽ in ra console kết quả sau:

[ 'func1 fired!', 'func2 fired' ] this function should be fired at the very last