Để chuyển đổi chức năng gọi lại của bạn thành Async/Await trong JavaScript :
Bước 1: Khai báo hàm là async
Để sử dụng từ khóa await bên trong một hàm, hàm đó phải được khai báo là async . Tất cả điều này làm là thêm từ khóa async trước định nghĩa hàm. ví dụ:
1 2 3 4 | <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">doSomething</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 関数本体</span> <span class="token punctuation">}</span> |
Bước 2: Sử dụng từ khóa await để đợi lời hứa
Thay vì chức năng gọi lại, chúng ta có thể sử dụng từ khóa await đợi để chờ lời hứa hoàn thành. Một lời hứa là một đối tượng đại diện cho sự thành công hay thất bại cuối cùng của một hoạt động không đồng bộ.
Đây là một ví dụ về cách sử dụng sự await với lời hứa:
1 2 3 4 5 6 7 8 | <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">doSomething</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</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> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// 非同期操作</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token comment">/* 非同期操作の結果 */</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 comment">// 非同期操作の結果をここで使用する</span> <span class="token punctuation">}</span> |
Ví dụ: Chuyển đổi chức năng gọi lại thành Async/ Async/Await Đây là ví dụ về cách chuyển đổi chức năng gọi lại thành Async/Await :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token comment">// オリジナルのコールバック関数</span> <span class="token keyword">function</span> <span class="token function">doSomething</span> <span class="token punctuation">(</span> <span class="token parameter">num <span class="token punctuation">,</span> callback</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">callback</span> <span class="token punctuation">(</span> num <span class="token operator">*</span> <span class="token number">2</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">1000</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// 変換されたAsync/Await関数</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">doSomething</span> <span class="token punctuation">(</span> <span class="token parameter">num</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> <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 keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> num <span class="token operator">*</span> <span class="token number">2</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">1000</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 comment">// 変換されたAsync/Await関数の使用</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">callDoSomething</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">doSomething</span> <span class="token punctuation">(</span> <span class="token number">5</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> result <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 10</span> <span class="token punctuation">}</span> |
Các hàm Async/Await đã chuyển đổi sẽ dễ viết hơn so với các hàm gọi lại ban đầu. Bạn không cần phải sử dụng cú pháp lồng nhau với các cuộc gọi lại, bạn có thể sử dụng từ khóa await để tạm dừng chức năng cho đến khi lời hứa hoàn thành.
Phần kết luận
Việc chuyển đổi các chức năng gọi lại của bạn thành Async/Await giúp mã của bạn dễ viết và dễ hiểu hơn. Bằng cách sử dụng các từ khóa không đồng async và await , bạn có thể viết mã không đồng bộ trông giống như mã thông thường, giúp gỡ lỗi dễ dàng hơn.
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.
Cảm ơn rất nhiều. Hẹn gặp lại các bạn trong bài viết tiếp theo!
Nếu các bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách like và subscribe. Cảm ơn.