Thời kỳ đầu học JavaScript mới, Promise là thứ gây nhầm lẫn nhiều nhất. Cứ nghĩ mình hiểu và biết cách sử dụng rồi nhưng trên thực tế, vẫn còn nhiều cú trượt dài đau rồi tự rút ra bài học cho mình. Tôi đọc nhiều bài nói về Promise cả tiếng Anh lẫn tiếng Việt, tăng dần mọi thứ thứ như tích tiểu thành đại, giúp cho mình hiểu và sử dụng thế nào cho đúng đắn.

Bài viết này sẽ không đi sâu vào khái niệm của Promise mà chỉ đi qua một vài ý lưu trữ và những điều có thể có lẫn lộn. Qua đó giúp bạn đọc hình ảnh và tránh một số lỗi trong quá trình viết mã của mình.

Hứa là gì?

Promise là một đại diện tượng trưng cho một kết quả trả về trong tương lai. Hay nói cách khác, Promise đại diện cho một kết quả của hàm không đồng bộ.

Một Promise bao gồm 3 trạng thái tương ứng với 3 kết quả của hàm bất đồng bộ.

• pending là trạng thái ban đầu, đang chờ kết quả.
• fulfilled là quá trình xử lý trạng thái thành công, có kết quả trả về.
• rejected là trạng thái thất bại, có thể đính kèm chi tiết lỗi.

Về bản chất, Promise là đại diện cho kết quả trả về trong tương lai. Ở ví dụ trên, chúng tôi hoàn toàn không cần thiết phải tạo một Promise để xử lý, vì tất cả các hoạt động bên trong hàm  fn đều là đồng bộ. Vậy thì như thế nào là bất đồng bộ cũng như nên tạo ra Promise khi nào?

Thế nào là bất đồng bộ chức năng? Tôi đã nhắc đến nhiều bài viết. Một số tác vụ I/O được cung cấp bởi hàm bất đồng bộ, vì chúng không thể trả về kết quả ngay lập tức mà phụ thuộc vào nhiều yếu tố bên ngoài như phần cứng tốc độ, tốc độ mạng… Nếu chờ các hoạt động này có thể xảy ra lãng phí thời gian hoặc gây ra tình trạng tắc nghẽn nghiêm trọng.

Lấy ví dụ về hành vi thực hiện một truy vấn GET đến địa chỉ  https://example.com,  lúc này công việc xử lý không đơn thuần phụ thuộc vào tốc độ của CPU nữa mà phụ thuộc vào tốc độ mạng của bạn. Mạng càng nhanh, bạn sẽ nhanh chóng có kết quả và ngược lại. Trong JavaScript, chúng tôi có hàm  fetch để gửi yêu cầu và hàm này bất đồng bộ, không trả về một Promise.

fetch('https://example.com');

Để xử lý kết quả của Promise, chúng tôi có  then và  catch so sánh hai trường hợp thành công và thất bại.

fetch('https://example.com')
    .then(res => console.log(res))
    .catch(err => console.log(err));

If after a xử lý thời gian,  fetch có trạng thái  fulfilled, hàm trong  then sẽ được kích hoạt, ngược lại,  fetch có trạng thái  rejected, ngay lập tức hàm trong  catch được thực thi.

Thực ra câu hỏi này nhằm kiểm tra kiến thức của bạn về hành vi bất đồng bộ trong JavaScript. Kết quả in ra là 1, 2, 3 chứ không phải là 1, 3, 2. Điều này xảy ra là do cơ chế xử lý bất đồng bộ, vì kết quả của hành vi bất đồng bộ sẽ được trả về trong tương lai cho nên JavaScript sẽ nghĩ rằng: “OK, hàm bất đồng bộ này chưa có kết quả ngay được, để đó đã, xử lý tiếp các lệnh bên dưới, khi nào hết sạch thì quay lại xem nó có kết quả chưa”. Bạn đọc có thể tham khảo thêm các bài viết về cơ chế xử lý bất đồng bộ tại Lập trình bất đồng bộ là gì? Tại sao JavaScript là ngôn ngữ lập trình bất đồng bộ?.

Trong Promise có một số hàm static hữu dụng trong nhiều trường hợp như: all, allSettled, any và race.

Promise.all nhận vào một mảng các Promise, nó cũng trả về một Promise và có trạng thái fulfilled khi tất cả Promise trong mảng đều thành công, ngược lại, nó có trạng thái rejected khi chỉ cần 1 Promise trong mảng bị thất bại.

Promise.allSettled cũng tương tự như Promise.all chỉ có điều nó luôn trả về tất cả kết quả của Promise trong mảng cho dù là thành công hay thất bại. Cả hai Promise.all và Promise.allSettled hữu ích trong trường hợp bạn cần chạy nhiều hàm bất đồng bộ ngay lập tức mà không quan trọng thứ tự kết quả.

Trong khi Promise.race trả về kết quả của Promise được giải quyết nhanh nhất trong mảng, không kể là thành công hay thất bại, thì Promise.any lại trả về kết quả thành công của Promise có trạng thái fulfilled đầu tiên trong mảng. race và any phù hợp trong các trường hợp bạn có nhiều Promise thực hiện hành động giống nhau và cần một trường hợp dự phòng giữa các kết quả đó.

Promise thay thế “callback hell”

Thật ngạc nhiên khi biết rằng trước kia JS không có Promise, đúng vậy bạn không nghe nhầm đâu, điều đó khiến cho Node.js cũng không có Promise trong những ngày đầu, và đó cũng chính là hối hận lớn nhất mà cha đẻ Node.js phải thốt ra.

Mọi tác vụ bất đồng bộ trước kia được xử lý qua callback, chúng ta cần xác định một hàm callback để xử lý kết quả trong tương lai.

return và return await

Thi thoảng, bạn sẽ bắt gặp đoạn mã trông giống như thế này ở đâu đó.

async function fn() {
    …
    return await asyncFn();
}

Hàm fn trên đang trả về một await của hàm bất đồng bộ asyncFn. Có lẽ tác giả đang dụng ý fn trả về một kết quả của asyncFn luôn, vì await là đang chờ kết quả của hàm bất đồng bộ mà, từ đó biến fn thành hàm đồng bộ, hay nói cách khác là fn “không” trả về một Promise nữa.

Nhưng rất tiếc đó là một nhầm lẫn tai hại, về bản chất await chỉ được sử dụng ở top-level, hoặc trong một hàm có khai báo async, mà đã là async thì hàm đó chắc chắn trả về một Promise. Do đó fn luôn luôn trả về Promise. Vậy tại sao lại return await asyncFn()?

Chỉ cần return asyncFn() thôi có thể tiết kiệm được một chút thời gian gõ phím của bạn, nó không có khác biệt gì đáng kể so với return await asyncFn(). Thay đổi lớn chỉ xảy ra khi xuất hiện try…catch ở return.

Hàm đầu tiên, rejectionWithReturnAwait đang cố return await và khi Promise này trả ra lỗi, catch nhanh chóng bắt lỗi đó và xử lý lệnh return 'Saved!'. Nghĩa là hàm này trả về một Promise chứa chuỗi ‘Saved’.

Ngược lại, rejectionWithReturn vì không có await nên hàm đang cố gắng đẩy ra một lỗi Promise.reject(new Error()), catch lúc này không bao giờ được thực thi nữa.