Last active
August 14, 2020 14:31
-
-
Save shubhamnikam/eb1df41418deebb84cb75b4f4aa8fd23 to your computer and use it in GitHub Desktop.
Simple implementation of JS callback/promise/fetch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "empId": 1, | |
| "name": "John", | |
| "city": "Satara", | |
| "salary" : 1000.0 | |
| }, | |
| { | |
| "empId": 2, | |
| "name": "Jane", | |
| "city": "Pune", | |
| "salary" : 2000.0 | |
| }, | |
| { | |
| "empId": 3, | |
| "name": "Jay", | |
| "city": "Mumbai", | |
| "salary" : 3000.0 | |
| } | |
| ] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Demo</title> | |
| </head> | |
| <body> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //SECTION promise | |
| /* let promise = new Promise((resolve, reject) => { | |
| let ans = 5 + 6; | |
| if (ans === 11) { | |
| console.log("before wait"); | |
| setTimeout(() => { | |
| console.log("to replicate api/db call waited for 5 sec"); | |
| resolve(`success with ${ans}`); | |
| }, 5000); | |
| } else { | |
| reject(`failed with ${ans}`); | |
| } | |
| }); | |
| promise.then((data) => { | |
| console.log(data); | |
| }).catch((error) => { | |
| console.log(error); | |
| });*/ | |
| //SECTION fetch | |
| /*fetch('https://api.github.com/users/shubhamnikam') | |
| .then((res) => (res.json())) | |
| .then((data) => { | |
| console.log(data); | |
| }).catch((error) => { | |
| console.log(`error during fetch ${error}`); | |
| }); | |
| fetch('https://api.github.com/users') | |
| .then((res) => (res.json())) | |
| .then((data) => { | |
| console.log(data); | |
| }).catch((error) => { | |
| console.log(`error during fetch ${error}`); | |
| }); | |
| */ | |
| //SECTION callback | |
| /* function doCalculations(successCallback,errorCallback ){ | |
| const ans = 5 + 6; | |
| if(ans === 11){ | |
| console.log("before wait"); | |
| setTimeout(() => { | |
| console.log("to replicate api/db call waited for 5 sec"); | |
| successCallback(`success result with ${ans}`); | |
| }, 5000); | |
| } else { | |
| errorCallback(`error result with ${ans}`); | |
| } | |
| } | |
| doCalculations(((result)=>{ | |
| console.log(result); | |
| }),((error)=>{ | |
| console.log(error); | |
| })); */ | |
| //SECTION convert above callback to promise | |
| /* function doCalculations(){ | |
| return new Promise((resolve, reject)=>{ | |
| const ans = 5 + 6; | |
| if(ans === 11){ | |
| console.log(`before wait`); | |
| setTimeout(()=>{ | |
| console.log("to replicate api/db call waited for 5 sec"); | |
| resolve(`success result with ${ans}`); | |
| }) | |
| } else { | |
| reject(`failed with ${ans}`); | |
| } | |
| }); | |
| } | |
| doCalculations().then((result)=>{ | |
| console.log(result); | |
| }).catch((error)=>{ | |
| console.log(error); | |
| }); */ | |
| //SECTION multiple promises [triggered after all promises success] | |
| /* let promise1 = new Promise((resolve, reject) => { | |
| resolve('data load success 1'); | |
| }); | |
| let promise2 = new Promise((resolve, reject) => { | |
| setTimeout(()=>{ | |
| resolve('data load success 2'); | |
| }, 5000); | |
| }); | |
| let promise3 = new Promise((resolve, reject) => { | |
| resolve('data load success 3'); | |
| }); | |
| //Promise.all -> then()/catch() will get triggered when all promises completes | |
| Promise.all([promise1, promise2, promise3]) | |
| .then((result) => { | |
| //result is array of all resolved promises | |
| console.log(result); | |
| }) | |
| .catch((error) => { | |
| //error is array of all rejected promises | |
| console.log(error); | |
| }); */ | |
| //SECTION multiple promises [triggered when 1st promise completes] | |
| /* let promise1 = new Promise((resolve, reject) => { | |
| resolve('data load success 1'); | |
| }); | |
| let promise2 = new Promise((resolve, reject) => { | |
| resolve('data load success 2'); | |
| }); | |
| let promise3 = new Promise((resolve, reject) => { | |
| resolve('data load success 3'); | |
| }); | |
| //Promise.race -> then()/catch() will get triggered when 1st promises completes | |
| Promise.race([promise1, promise2, promise3]) | |
| .then((result) => { | |
| //result is resolved only 1st promises | |
| console.log(result); | |
| }) | |
| .catch((error) => { | |
| //error is rejected only 1st promises | |
| console.log(error); | |
| }); | |
| */ | |
| //SECTION fetch implementation local json fetch | |
| fetch('./data_user.json') | |
| .then((res)=>(res.json())) | |
| .then((data)=>{ | |
| //add 100 to salary | |
| let updatedData = data.map((item, index)=>{ | |
| if(item.salary >= 2000){ | |
| item.salary += 100; | |
| } | |
| return item; | |
| }); | |
| //call to do ui changes | |
| updateUI(updatedData); | |
| }).catch((error)=>{ | |
| console.log(error); | |
| }); | |
| function updateUI(updatedData){ | |
| updatedData.forEach((item, index)=>{ | |
| console.log(`${index + 1} : ${item.name} - ${item.salary}`); | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment