@@ -2107,6 +2107,136 @@ btn.addEventListener('click', clickHandler.handleClick.bind(clickHandler));
21072107
21082108</details>
21092109
2110+ ### 48. How to replace callbackhell with Promise or Async/Await with examples ?
2111+
2112+ <details><summary><b>Answer</b></summary>
2113+
2114+ - Part I Callbackhell.
2115+ - Calling one callback function inside another and so on is callbackhell.
2116+ - First we are defining three functions addTen, subFive and mulTwo.
2117+ - These three functions while called with a number, will return a callback.
2118+ - The callback function will return either result or error.
2119+
2120+ ` ` ` js
2121+ const addTen = (num , callback ) =>
2122+ {return callback (num+ 10 , false )}
2123+ ` ` `
2124+
2125+ ` ` ` js
2126+ const subFive = (num , callback ) =>
2127+ {return callback (num- 5 , false )}
2128+ ` ` `
2129+
2130+ ` ` ` js
2131+ const mulTwo = (num , callback ) =>
2132+ {return callback (num* 2 , false )}
2133+ ` ` `
2134+
2135+ - Now lets call these one by one in nested way.
2136+ - The result of previous will serve as input for next callback.
2137+
2138+ ` ` ` js
2139+ const ans = addTen (5 , (addRes , addErr ) => { // addRess = 15
2140+ if (! addErr)
2141+ {
2142+ return subFive (addRes , (subRes , subErr ) => { // subRes = 10
2143+ if (! subErr){
2144+ return mulTwo (subRes, (mulRes , mulErr ) => {
2145+ if (! mulErr)
2146+ {
2147+ return mulRes; // 20
2148+ }
2149+ })
2150+ }
2151+ })
2152+ }
2153+ })
2154+ console .log (ans); // 20
2155+ ` ` `
2156+
2157+ - Part II Promise.
2158+ - Promise has two parameters resolve and reject.
2159+ - Rewrting those three function definations as well, without a callback.
2160+
2161+ ` ` ` js
2162+ const addTen = (num ) => {return num+ 10 }
2163+ ` ` `
2164+
2165+ ` ` ` js
2166+ const subFive = (num ) => {return num- 5 }
2167+ ` ` `
2168+
2169+ ` ` ` js
2170+ const mulTwo = (num ) => {return num* 2 }
2171+ ` ` `
2172+
2173+ - Creating a promise.
2174+
2175+ ` ` ` js
2176+ const promise = new Promise ((resolve , reject ) => {
2177+ if (true )
2178+ resolve (5 )
2179+ else
2180+ reject (" Something went wrong " )
2181+ })
2182+ ` ` `
2183+
2184+ - Calling those three functions one by one.
2185+ - "then" will keep on returning the result and if any error "catch" will catch it.
2186+
2187+ ` ` ` js
2188+ promise .then (addTen).then (subFive).then (mulTwo).then ((ans )=> {
2189+ console .log (ans)
2190+ }).catch ((err )=> {console .log (err)});
2191+ ` ` `
2192+
2193+ - Part III Async / Await.
2194+ - It actually uses promise internally.
2195+
2196+ ` ` ` js
2197+ const addTen = ( num ) => {
2198+ return new Promise ( ( resolve , reject ) => {
2199+ resolve ( num+ 10 )
2200+ } )
2201+ }
2202+ ` ` `
2203+
2204+ ` ` ` js
2205+ const subFive = ( num ) => {
2206+ return new Promise ( ( resolve , reject ) => {
2207+ resolve ( num- 5 )
2208+ } )
2209+ }
2210+ ` ` `
2211+
2212+ ` ` ` js
2213+ const mulTwo = ( num ) => {
2214+ return new Promise ( ( resolve , reject ) => {
2215+ resolve ( num* 2 )
2216+ } )
2217+ }
2218+ ` ` `
2219+
2220+ - Put Async keyword before function name and Await before the statments inside the function
2221+ - Await will make the later code wait until the result of that statement is returned.
2222+ - Always put this inside a try/catch block.
2223+
2224+ ` ` ` js
2225+ const ans = async (num ) => {
2226+ try {
2227+ var addRes = await addTen (num);
2228+ var subRes = await subFive (addRes);
2229+ var mulRes = await mulTwo (subRes);
2230+ console .log (mulRes)
2231+ } catch (err) {
2232+ console .log (err)
2233+ }
2234+ }
2235+ ans (5 )
2236+ ` ` `
2237+
2238+ </details>
2239+
21102240# Coding Questions
21112241
21122242## Passing values by reference vs by value
0 commit comments