Skip to content

Commit dd5e263

Browse files
committed
added 48th ques about callbackhell promise async/await
1 parent 095019c commit dd5e263

File tree

1 file changed

+130
-0
lines changed

1 file changed

+130
-0
lines changed

README.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)