I’m TUAN, currently a Full-stack Developer in Tokyo.
If you find this Blog interesting, please give me a like and subscribe to support me.
Callback : In JavaScript, callback is a function passed as a parameter to another function. The function executes as soon as the result of the calling function is ready. Simply put, it handles JavaScript asynchronous requests.
Example best to demonstrate this is to use a function setTimeout() take a function callback and delay execution exam code. As soon as the function timeout expires, the callback function will execute.
1 2 3 4 5 6 | <span class="token keyword">var</span> <span class="token function- variable function">callback</span> <span class="token operator">=</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">"Hello! GeeksforGeeks"</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">setTimeout</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span> |
Output:
Hello! GeeksforGeeks
Promise: It is very similar to the callback commands in action. However, the advantage of using Promises is to improve readability of code as it saves us from callback hell.
Promise has four states:
- Pending: The promise is still incomplete. Neither success nor failure.
- Fulfilled: Promise ended successfully.
- Reject: Promise ends with an error.
- Settled: Promise has failed or failed.
Convert an existing callback to a Promise:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token keyword">var</span> <span class="token function- variable function">callback</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span ><span class="token parameter">err<span class="token punctuation">,</span> success</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>err<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">"Geek is very sad!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</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">"Geek is optimistic, "</span> <span class="token operator">+</span> <span class="token string">"thus becomes successful"</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 keyword">var</span> <span class="token function-variable function">caller</span> <span class="token operator">=</span> <span class=" token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">status<span class="token punctuation">,</span> callback</span> span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>status <span class="token operator">===</span> <span class=" token string">"Happy"</span><span class="token punctuation">)</span> <span class="token function">callback</span><span class="token punctuation">(< /span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class=" token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class- name">Error</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token boolean">false</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">caller</span><span class="token punctuation">(</span><span class="token string">"Happy"</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">caller</span><span class="token punctuation">(</span><span class="token string">"Sad"</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span> |
Output:
1 2 3 | Geek is optimistic, thus becomes successful Geek is very sad! |
Steps to convert above code into Promise:
- Create a function named error and insert the error handling code block above the callback function in it.
- Create a function called success and insert the block code on success above in it.
- Then modify the caller code by returning a promise.
object
- Use the functions success and error in any of the following ways.
- See below code for better understanding.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token keyword">var</span> <span class="token function-variable function">error</span> <span class="token operator">=</span> <span class="token keyword">function</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">"Geek is very sad!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">var</span> <span class="token function-variable function">success</span> <span class="token operator">=</span> <span class=" token keyword">function</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">"Geek is optimistic, "</span> <span class="token operator">+</span> <span class="token string">"thus becomes successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">var</span> <span class="token function-variable function">caller</span> <span class="token operator">=</span> <span class=" token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">status</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 keyword">function</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 punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>status <span class="token operator">===</span> <span class=" token string">"Happy"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">reject</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 punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token function">caller</span><span class="token punctuation">(</span><span class="token string">"Happy"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span> success<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation ">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">caller</span><span class="token punctuation">(</span><span class="token string">"Sad"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span> success<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation ">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span> |
Output:
1 2 3 | Geek is optimistic<span class="token punctuation">,</span> thus becomes successful Geek is very sad<span class="token operator">!</span> |
Let’s apply them to Nodejs.
Install Nodejs and set up a simple Node application by following the steps shown here .
Example: Here, the scenario is we have a array student with id and name</strong > are the value . We need to get name of student having given id. We are given an existing callback directive that needs to be converted to a promise.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <span class="token keyword">const</span> express <span class="token operator ">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"express"</span ><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation ">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> students <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">101</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Geek A"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">102</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Geek B"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">103</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Geek C"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">104</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Geek D"</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 keyword">const</span> <span class="token function-variable function">callback</span> <span class="token operator">=</span> <span class=" token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> student</span><span class="token punctuation">)</ span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Student with given id </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>err<span class="token interpolation-punctuation punctuation">} </span></span><span class="token string"> not found</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Here is the student: "</span> <span class="token operator">+</span> student< span class="token punctuation">.</span>name<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">findName</span> <span class="token operator">=</span> <span class=" token punctuation">(</span><span class="token parameter">studentId<span class="token punctuation">,</span> callbackFunction</span><span class="token punctuation">)</ span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> student <span class="token operator">=</span> students<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">studentValue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> studentValue<span class="token punctuation">.</span>id <span class="token operator">==</span> studentId<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> student <span class="token operator ">===</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span> <span class="token punctuation">{< /span> <span class="token keyword">return</span> <span class="token function">callbackFunction</span><span class="token punctuation">(</span>studentId<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">callbackFunction</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> student<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 keyword">const</span> <span class="token function-variable function">getName</span> <span class="token operator">=</span> <span class=" token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</ span> <span class="token operator">=></span> <span class="token punctuation">{</span> res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token function">findName</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>params<span class="token punctuation">.</span >studentId<span class="token punctuation">,</span> callback<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> app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"/getName/:studentId"</span><span class="token punctuation">,</span> getName<span class="token punctuation">)</span><span class="token punctuation">;</span> app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8000</span><span class="token punctuation">,</span> <span class="token string">"localhost"</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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Server Listening"</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></span></span></span></span></span> |
Output:
We can now convert the callback function into promise functions. Here we can repeat the previous steps, i.e. Error logic in function failure and Success logic in function < strong>success. See the code below for more information.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <span class="token keyword">const</span> express <span class="token operator ">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"express"</span ><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation ">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> students <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">101</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Geek A"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">102</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Geek B"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">103</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Geek C"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">104</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"Geek D"</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 keyword">const</span> <span class="token function-variable function">success</span> <span class="token operator">=</span> <span class=" token punctuation">(</span><span class="token parameter">student</span><span class="token punctuation">)</span> <span class="token operator">=>< /span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Here is the student: "</span> <span class="token operator">+</span> student< span class="token punctuation">.</span>name<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">failure</span> <span class="token operator">=</span> <span class=" token punctuation">(</span><span class="token parameter">fail</span><span class="token punctuation">)</span> <span class="token operator">=>< /span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Student with the given id </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>fail<span class="token interpolation-punctuation punctuation"> }</span></span><span class="token string"> was not found</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 keyword">const</span> <span class="token function-variable function">findName</span> <span class="token operator">=</span> <span class=" token punctuation">(</span><span class="token parameter">studentId</span><span class="token punctuation">)</span> <span class="token operator">=>< /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 keyword">function</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 punctuation">{</span> <span class="token keyword">let</span> student <span class="token operator">=</span> students<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">studentValue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> studentValue<span class="token punctuation">.</span>id <span class="token operator">==</span> studentId<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>student<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">resolve</span><span class="token punctuation">(</span>student<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">reject</span><span class="token punctuation">(</span>id<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 punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">getName</span> <span class="token operator">=</span> <span class=" token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</ span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> answer <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function ">findName</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>params<span class="token punctuation">.</span >studentId<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>success<span class="token punctuation marks">)</span> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span>failure<span class="token punctuation marks">)</span><span class="token punctuation">;</span> res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>answer<span class="token">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"/getName/:studentId"</span><span class="token punctuation">,</span> getName<span class="token punctuation">)</span><span class="token punctuation">;</span> app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8000</span><span class="token punctuation">,</span> <span class="token string">"localhost"</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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Server Listening"</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></span></span></span></span></span> |
Output:
As always, I hope you enjoyed this post and learned something new.
Thank you and see you in the next posts!
If you like my blog, click follow to support me. Thank you.