Promise Javascript là gì? Sử dụng Promise trong Javascript

1. Định nghĩa “Promise Javascript là gì?”

Trước tiên, bạn đọc cần hiểu về Javascript là gì. Javascript là ngôn ngữ đơn luồng, cụ thể là tại một thời điểm nhất định, một mã xử lý nhiệm vụ sẽ chạy một lần duy nhất trong trường hợp đó, nếu muốn chạy lần thứ hai nó phải đợi quá trình lần thứ nhất kết thúc.

Điều này tuân thủ theo nguyên tắc hoạt động của quá trình đồng bộ. Do vậy trong nhiều trường hợp, nó gây ra không ít phiền toái và gây mất thời gian. Hãy thử tưởng tượng, khi bạn đến bệnh viện khám bệnh, bạn sẽ thấy một hàng dài người chờ đợi để đến lượt. Vậy hành động đó ảnh hưởng đến thời gian cũng như các mặt khác của bạn. Qúa trình này trong lập trình được gọi là quá trình đồng bộ hóa Synchronous.

Vậy có phải Promise sinh ra sẽ giải quyết được vấn đề này trong Javascript hay không? Câu trả lời chắc chắn là có. Promise được sử dụng để giải quyết các vấn đề đồng bộ. Theo tìm hiểu và tổng hợp, timviec365.vn sẽ đưa đến khái niệm về Promise Javascript của nhà phát hành. Cụ thể như sau:

“Promise là đối tượng sử dụng trong việc tính toán bất đồng bộ. Promise đại diện cho một tác vụ hoặc một quá trình chưa hoàn thành ngay được. Trong tương lai, Promise sẽ trả lại giá trị kết quả đã được giải quyết hay là không.”

Hành động Callback là hành động gọi lại, chẳng hạn như để trả lời cho câu hỏi “Thành công hay thất bại” khi chạy một lệnh, thì quá trình trả lại kết quả dữ liệu được gọi là Callback Function. Dĩ nhiên là chức năng này có thể xảy ra lỗi và lỗi hay gặp nhất là Callback Hell. Một ví dụ khác dễ hiểu hơn cho bạn đọc, khi bạn thực hiện tìm kiếm hình ảnh trên trình duyệt, nếu hình ảnh load được là kết quả trả về thành công dữ liệu, còn nếu hình ảnh không load được thì một hình ảnh giải thích khác sẽ xuất hiện như không có kết nối, kết nối lỗi,... và điều đó có nghĩa là kết quả trả về là không thành công. Hành động đó chính là Callback Function.

Để giải quyết vấn đề này, Promise được tạo ra với ba trạng thái xuất hiện khi nó được khởi động: Pending. Fulfilled, Rejected.

Trong trường hợp của đó, Pending ám chỉ hành động đang được xử lý hoặc chưa hoàn tất, Fulfilled có nghĩa là hành động đã được thực hiện và thành công, còn Rejected thì ngược lại, hành động đã hoàn tất nhưng không thành công. Rejected và Fulfilled còn được gọi chung là Settled có nghĩa là đã xử lý xong.

Tìm hiểu thêm: JSX là gì? Cú pháp mở rộng trong Javascript có gì hấp dẫn?

2.  Lập trình bất đồng bộ có liên quan gì đến Promise

Lập trình đồng bộ thường hay gặp nhất trong quá trình viết source code. Đó là khi chúng ta viết xong một hệ thống câu lệnh, chúng ta check nó và trong quá trình đó chúng ta phải đợi. Như vậy quá trình đồng bộ xảy ra theo trình tự và chúng ta sẽ không thể làm gì khác ngoài việc chờ đợi hệ thống check.

Còn quá trình bất đồng bộ có nghĩa là bạn vẫn tạo một hệ thống câu lệnh và check nó. Trong quá trình kiểm tra hệ thống, bạn có thể thực hiện các công việc khác như viết một lệnh khác,... Sau khi hệ thống kiểm tra hoàn tất, bạn chỉ cần gọi lại hàm Callback để lấy kết quả. Từ đây bạn có thể thấy lập trình bất đồng bộ có những điểm hay và độc đáo hơn lập trình đồng bộ vì bạn có thể giảm bớt thời gian chờ đợi. Đồng hành cùng lập trình bất đồng bộ này chính là công cụ Promise mà timviec365.vn nhắc tới hôm nay.

Xem thêm: Ngành Toán tin ra làm gì và câu trả lời chuẩn nhất?

3. Tại sao phải dùng Promise trong Javascript? Và cách sử dụng của Promise

Bạn có thắc mắc rằng tại sao có Callback Function rồi nhưng người ta vẫn dùng Promise không? Câu trả lời đã được đề cập bên trên, ngay trong chính bài viết này, Promise sẽ cải thiện và giải quyết vấn đề mà Callback Function gây ra có tên gọi Callback Hell. Vậy Promise trong Javascript chỉ xử lý Callback Hell hay còn có những ưu điểm khác?

- Cho phép hỗ trợ “chaning”: Channing ở đây có nghĩa là Promise cho phép bạn gọi nhiều hàm bất đồng bộ một cách liên tiếp, thông qua giá trị trả về từ hàm .(then).

- Khả năng bắt lỗi dễ hơn Callback: hàm .(catch) sẽ được dùng trong trường hợp này và chỉ xảy ra khi có hàm .(reject). Phương thức hay câu lệnh, chức năng của hàm .(catch) tương đối giống với hàm .(then) cho phép bắt lỗi liên tục và song song, chỉ khác ở điều kiện .(reject).

- Giải quyết một số vấn đề của Callback như cho phép bắt được nhiều lỗi nhất có thể, từ lỗi throw Error tới lỗi cú pháp khi lập trình. Mã nguồn sẽ không bao giờ bị lo lọt lỗi nếu sử dụng Promise.

- Sử dụng vòng lặp để thu được nhiều Promise cùng một lúc. Sử dụng hàm nào để thực hiện điều này? Promise.all sẽ giúp bạn thực hiện điều này theo cú pháp Promise.all ([promise 1, promise2,..]).

Qua đây, các bạn đọc có thể xác định được hai phương thức chủ yếu mà Promise hoạt động đó là .(then) và .(catch).

Tham khảo: Mô tả công việc System Engineer - Kỹ sư hệ thống làm gì?

4. Cú pháp đơn giản để tạo Promise

Cú pháp để tạo ra Promise như sau:

 new Promise ( /*executor*/function (resolve, reject) {...});

Trong đó executor function được chứa trong một constructor, bao gồm hai tham số la resolve và reject. Tác dụng của hai chức năng này cũng thể hiện kết quả thành công hay thất bại.

Xem thêm: Django là gì? Kiến thức về Django cho chuyên gia phát triển web

5. Những sai lầm thường gặp khi thực hiện Promise

Ở đây, chúng tôi tổng hợp được ba sai lầm hay gặp nhất khi các coder, developer thực hiện Promise.

Sai lầm đầu tiên phải kể đến là lỗi kết nối hay còn gọi là kết nối không đúng cách. Sai lầm này xảy ra trong quá trình chúng ta thực hiện một Promise mới mà quên không trả lại kết quả. Sai lầm này dẫn đến hai hậu quả có thể có là chuỗi hỏng hoặc có hai chuỗi độc lập đang chạy cùng một lúc. Xét về hàm thì điều đó có nghĩa là lệnh doFourhting() sẽ chạy song song cùng lúc với một trong hai lệnh doSomethingElse() hoặc doThirdthing(). Đây là vấn đề không ai mong muốn vì các chuỗi khác nhau sẽ xử lý lỗi khác nhau ở cùng hoặc khác thời điểm. Xét cho cả tổng thể, chuỗi bị lỗi và không thể xử lý.

Sai lầm thứ hai được nhắc đến nhiều đó là hiện tượng hàm lồng nhau. Vấn đề hàm lồng nhau xảy ra khi không cần thiết là tiền tố dẫn đến sai lầm đầu tiên. Phạm vi của các quá trình xử lý lỗi xảy ra bên trong có tạo ra giới hạn khi chúng lồng nhau. Nếu các lập trình viên không để ý sẽ dẫn tới việc nhiều lỗi không được xử lý. Promise Constructor Anti-pattern là sự kết hợp giữa lồng với việc sử dụng Promise Constructor dự phòng và đồng thời cũng là một biến thể của vấn đề này.

Sai lầm cuối cùng mà chúng tôi tổng hợp được là quên kết thúc chuỗi bằng .(catch). Những chuỗi Promise không kết thúc hay chấm dứt bằng .(catch) sẽ bị lỗi (uncaught promise rejection) khi chạy Reject. Điều này xảy ra hầu hết trong các trình duyệt.

Đến đây, chúng tôi đã đưa cho bạn thông tin về khái niệm, cách sử dụng, cú pháp và một số lỗi hay gặp khi sử dụng Promise trong Javascript. Giải pháp này rất quan trọng để trong quá trình bất đồng bộ. Hy vọng bạn đọc sẽ có thêm một số thông tin về Promise sau khi đọc bài viết này.