To convert your callback function to Async/Await in JavaScript :
Step 1: Declare the function as async
To use the await keyword inside a function, the function must be declared as async . All this does is add the async keyword before the function definition. example:
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> |
Step 2: Use the await keyword to wait for the promise
Instead of a callback function, we can use the await keyword to wait for the promise to complete. A promise is an object that represents the eventual success or failure of an asynchronous operation.
Here’s an example of how to use await with promises:
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> |
Example: Convert a Callback Function to Async/ Async/Await This is an example of how to convert a callback function to 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> |
The converted Async/Await functions are cleaner to write than the original callback functions. You don’t have to use nested syntax with callbacks, you can use the await keyword which suspends the function until the promise completes.
Conclusion
Converting your callback functions to Async/Await makes your code easier to write and easier to understand. By using the async and await keywords, you can write asynchronous code that looks like regular code, making it easier to debug.
As always, I hope you enjoyed this article and learned something new.
Thank you very much. See you in the next article!
If you like this article, please support us by liking and subscribing. thank you.