Converting Callback Functions to Async/Await in JavaScript. Async/await is a way to write asynchronous code in JavaScript that looks like normal code. This can make your code easier to write and understand, and can improve its readability and maintainability.
If you have a callback function that you want to convert to use async/await, here’s how you can do it:
Step 1: Declare the function as async
To use the await keyword inside a function, you need to declare the function as async. To do this, just add the async keyword before the function definition, like this:
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">// function body goes here</span> <span class="token punctuation">}</span> |
Step 2: Use the await keyword to wait for a promise
Instead of using a callback function, you can use the await keyword to wait for a promise to be finished. 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 a promise:
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">// asynchronous operation goes here</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token comment">/* result of asynchronous operation */</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">// use the result of the asynchronous operation here</span> <span class="token punctuation">}</span> |
Example: Converting a callback function to async/await Here’s an example of how to convert a callback function to use 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">// original callback function</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">// converted async/await function</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">// usage of converted async/await function</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 function is easier to read and write than the original callback function. You don’t have to use the nested function syntax of callbacks, and you can use the await keyword to pause the function until the promise is finished.
Conclusion
Converting callback functions to async/await can make your code easier to write and understand, and can improve its maintainability. By using the async keyword and the await keyword, you can write asynchronous code that looks like normal code, which can make it easier to debug.
As always, I hope you enjoyed this article and learned something new. Thank you and see you in the next articles!
If you liked this article, please give me a like and subscribe to support me. Thank you.