1. Giới thiệu về JavaScript không đồng bộ
JavaScript không đồng bộ là gì?
JavaScript không đồng bộ có nghĩa là một số tác vụ có thể được thực thi mà không cần chặn hoặc đợi các tác vụ khác hoàn thành. Điều này cho phép sử dụng thời gian hiệu quả hơn, vì chương trình của bạn có thể tiếp tục làm những việc khác trong khi chờ một tác vụ hoàn thành.
Tại sao lập trình không đồng bộ lại quan trọng?
Hãy tưởng tượng đi đến một nhà hàng thức ăn nhanh. Bạn đặt hàng, và sau đó bạn phải đợi nhân viên chuẩn bị. Trong khi đó, nhân viên thu ngân có thể phục vụ các khách hàng khác, thay vì bắt mọi người phải xếp hàng dài chờ đợi. Lập trình không đồng bộ trong JavaScript hoạt động theo cách tương tự, cho phép mã của bạn chạy trơn tru mà không bị chặn bởi các tác vụ tốn thời gian.
2. Gọi lại
Gọi lại là gì?
Một cuộc gọi lại chỉ đơn giản là một chức năng được truyền dưới dạng đối số cho một chức năng khác và được thực thi tại một thời điểm sau đó. Gọi lại là một cách để xử lý các tác vụ không đồng bộ trong JavaScript.
Callback hoạt động như thế nào?
Hãy sử dụng một ví dụ để hiểu cách gọi lại hoạt động. Hãy tưởng tượng bạn muốn gửi yêu cầu đến máy chủ để lấy một số dữ liệu. Yêu cầu này có thể mất một chút thời gian để hoàn thành và bạn không muốn toàn bộ ứng dụng của mình phải đợi nó. Bạn có thể sử dụng chức năng gọi lại để xử lý việc này.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">function</span> <span class="token function">getDataFromServer</span> <span class="token punctuation">(</span> <span class="token parameter">url <span class="token punctuation">,</span> callback</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Simulate a request to the server</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Data received from the server'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token function">callback</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">2000</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">processData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Processing the data'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">getDataFromServer</span> <span class="token punctuation">(</span> <span class="token string">'https://example.com/data'</span> <span class="token punctuation">,</span> processData <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Trong ví dụ này, getDataFromServer lấy URL và hàm gọi lại làm đối số. Hàm setTimeout mô phỏng độ trễ có thể xảy ra trong khi gửi yêu cầu tới máy chủ. Sau 2 giây, câu lệnh console.log được thực thi và sau đó hàm gọi lại processData được gọi.
Vấn đề với các cuộc gọi lại
Vấn đề chính với các cuộc gọi lại là cái gọi là “địa ngục cuộc gọi lại”, đó là khi nhiều cuộc gọi lại được lồng vào nhau. Điều này có thể dẫn đến mã lộn xộn, khó đọc.
3. Lời hứa
Lời hứa là gì?
Lời hứa là một cách nâng cao hơn để xử lý các tác vụ không đồng bộ trong JavaScript. Promise là một đối tượng đại diện cho sự hoàn thành cuối cùng (hoặc thất bại) của một hoạt động không đồng bộ và giá trị kết quả của nó.
Lời hứa hoạt động như thế nào?
Một Promise được tạo bằng cách sử dụng hàm tạo Promise, nhận một đối số duy nhất: một hàm được gọi là “bộ thực thi”. Hàm thực thi nhận hai đối số: hàm “giải quyết” và hàm “từ chối”.
- Hàm giải quyết được sử dụng để thực hiện lời hứa với giá trị kết quả.
- Chức năng reject được sử dụng để từ chối lời hứa với một lý do (thường là một lỗi).
Đây là một ví dụ về việc tạo một Lời hứa:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">const</span> myPromise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">resolve <span class="token punctuation">,</span> reject</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// Do some asynchronous task</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token string">'Success!'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">2000</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> myPromise <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">result</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> result <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Success!</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Xâu chuỗi lời hứa
Một trong những tính năng chính của Promise là khả năng xâu chuỗi chúng lại với nhau. Điều này cho phép bạn thực hiện một loạt tác vụ không đồng bộ theo cách có tổ chức và dễ đọc hơn.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token keyword">function</span> <span class="token function">fetchData</span> <span class="token punctuation">(</span> <span class="token parameter">url</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">resolve <span class="token punctuation">,</span> reject</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">Data from </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> url <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">2000</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">fetchData</span> <span class="token punctuation">(</span> <span class="token string">'https://example.com/data1'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">data1</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> data1 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Data from https://example.com/data1</span> <span class="token keyword">return</span> <span class="token function">fetchData</span> <span class="token punctuation">(</span> <span class="token string">'https://example.com/data2'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">data2</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> data2 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Data from https://example.com/data2</span> <span class="token keyword">return</span> <span class="token function">fetchData</span> <span class="token punctuation">(</span> <span class="token string">'https://example.com/data3'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">data3</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> data3 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Data from https://example.com/data3</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> <span class="token string">'An error occurred:'</span> <span class="token punctuation">,</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Trong ví dụ này, chúng tôi đã tạo một hàm fetchData trả về một Lời hứa. Sau đó, chúng tôi sử dụng phương thức then để xâu chuỗi các Lời hứa lại với nhau. Nếu xảy ra lỗi, phương thức catch sẽ xử lý nó.
4. Không đồng bộ/Đang chờ
Async/Await là gì?
Async/await là một cách hiện đại hơn để làm việc với các tác vụ không đồng bộ trong JavaScript, được xây dựng dựa trên Promise. Nó cho phép bạn viết mã không đồng bộ có giao diện và hoạt động giống như mã đồng bộ, giúp dễ đọc và dễ hiểu hơn.
Async/Await hoạt động như thế nào?
Để sử dụng async/await, bạn cần khai báo một hàm là async . Bên trong một chức năng async , bạn có thể sử dụng từ khóa await để tạm dừng việc thực thi chức năng cho đến khi Lời hứa được giải quyết.
Đây là một ví dụ sử dụng cùng chức năng fetchData từ phần trước:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> data1 <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchData</span> <span class="token punctuation">(</span> <span class="token string">'https://example.com/data1'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> data1 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Data from https://example.com/data1</span> <span class="token keyword">const</span> data2 <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchData</span> <span class="token punctuation">(</span> <span class="token string">'https://example.com/data2'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> data2 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Data from https://example.com/data2</span> <span class="token keyword">const</span> data3 <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchData</span> <span class="token punctuation">(</span> <span class="token string">'https://example.com/data3'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> data3 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Data from https://example.com/data3</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> <span class="token string">'An error occurred:'</span> <span class="token punctuation">,</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function">getData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Trong ví dụ này, chúng tôi khai báo hàm getData là async . Bên trong chức năng, chúng tôi sử dụng từ khóa chờ đợi để wait các Lời hứa được trả về bởi fetchData để giải quyết. Nếu xảy ra lỗi, chúng tôi xử lý nó bên trong khối catch .
Không đồng bộ/Đang chờ xử lý lỗi
Để xử lý lỗi trong async/await, bạn có thể sử dụng câu lệnh try and catch. Khối try chứa mã có thể gây ra lỗi, trong khi khối catch xử lý lỗi.
5. Kết luận
Trong bài viết này, chúng ta đã tìm hiểu về JavaScript không đồng bộ và cách làm việc với các tác vụ không đồng bộ bằng cách sử dụng lệnh gọi lại, Lời hứa và async/await. Mỗi phương pháp đều có những ưu điểm và trường hợp sử dụng riêng:
- Gọi lại là cách cơ bản nhất để xử lý các tác vụ không đồng bộ nhưng có thể dẫn đến “địa ngục gọi lại” và mã lộn xộn.
- Lời hứa cung cấp một cách có cấu trúc và dễ đọc hơn để xử lý các tác vụ không đồng bộ, cho phép tạo chuỗi và xử lý lỗi tốt hơn.
- Async/await, được xây dựng dựa trên Promises, cho phép bạn viết mã không đồng bộ có giao diện và hoạt động giống như mã đồng bộ, cải thiện khả năng đọc và khả năng bảo trì.
Hiểu các khái niệm này và biết khi nào nên sử dụng từng phương pháp sẽ giúp bạn viết mã JavaScript hiệu quả và có tổ chức hơn, cho phép các ứng dụng của bạn chạy trơn tru mà không bị chặn bởi các tác vụ tốn thời gian.
Và cuối cùng
Như mọi khi, tôi hy vọng bạn thích bài viết này và học được điều gì đó mới. Xin cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo!
Nếu các bạn thích bài viết này thì hãy cho mình 1 like và subscribe để ủng hộ mình nhé. Cảm ơn.