-
-
Save davidglezz/b2e3e34676b50ead385342be48212566 to your computer and use it in GitHub Desktop.
Convert Callbacks to Promise to Async/Await
This file contains 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"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Document</title> | |
<style media="screen"> | |
html,body{ | |
font-family: monospace; | |
} | |
button { | |
padding: 2em; | |
margin: 2em; | |
cursor: pointer; | |
border: none; | |
outline: none; | |
color: #FFF; | |
background-color: #27ae60; | |
text-transform: uppercase; | |
} | |
button:hover{ | |
background-color: #2ecc71; | |
} | |
</style> | |
</head> | |
<body> | |
<center><h3>SEE CONSOLE</h3> | |
<button type="button" id="buttonCallback">GET BY CALLBACK</button> | |
<button type="button" id="buttonPromise">GET BY PROMISE</button> | |
<button type="button" id="buttonAsync">GET BY ASYNC & AWAIT</button> | |
<button type="button" onclick="logResolversSerial()">Log Serial</button> | |
<button type="button" onclick="logResolversParallel()">Log Parallel</button> | |
</center> | |
<script> | |
//From https://applyhead.com | |
const http = { | |
getWithCallback(url, callback) { | |
const xhr = new XMLHttpRequest(); | |
let response = null; | |
xhr.addEventListener("readystatechange", function() { | |
if (this.readyState === xhr.DONE) { | |
response = this.responseText; | |
if (response) { | |
response = JSON.parse(response); | |
callback(false, response); | |
} | |
} | |
}); | |
xhr.open("GET", url, true); | |
xhr.send(); | |
xhr.onerror = function(error) { | |
callback(true, { | |
error: "Some error" | |
}) | |
} | |
}, | |
getWithPromise(url) { | |
return new Promise((resolve, reject) => { | |
const xhr = new XMLHttpRequest(); | |
let response = null; | |
xhr.addEventListener("readystatechange", function() { | |
if (this.readyState === xhr.DONE) { | |
response = this.responseText; | |
if (response) { | |
response = JSON.parse(response); | |
resolve(response); | |
} | |
} | |
}); | |
xhr.open("GET", url, true); | |
xhr.send(); | |
xhr.onerror = function(error) { | |
reject({ | |
error: "Some error" | |
}) | |
} | |
}); | |
}, | |
resolveAfter(secs) { | |
return new Promise((resolve, reject) => { | |
window.setTimeout(() => { | |
resolve(`I should take ${secs} seconds`); | |
}, secs * 1000); | |
}) | |
} | |
}; | |
const buttonCallback = document.querySelector('#buttonCallback'); | |
const buttonPromise = document.querySelector('#buttonPromise'); | |
const buttonAsync = document.querySelector('#buttonAsync'); | |
const link = 'https://api.github.com/search/users?q=location:delhi'; | |
const logWithAsync = async(url) => { | |
let data = await http.getWithPromise(url); | |
console.log(data); | |
}; | |
const logResolversSerial = async() => { | |
console.log(await http.resolveAfter(2)); | |
console.log(await http.resolveAfter(3)); | |
console.log(await http.resolveAfter(4)); | |
}; | |
const logResolversParallel = () => { | |
http.resolveAfter(5).then(v => console.log(v)) | |
http.resolveAfter(5).then(v => console.log(v)) | |
http.resolveAfter(5).then(v => console.log(v)) | |
http.resolveAfter(5).then(v => console.log(v)) | |
} | |
buttonCallback.addEventListener("click", () => { | |
http.getWithCallback(link, function(err, data) { | |
if (!err) { | |
console.log(data); | |
} | |
}); | |
}); | |
buttonPromise.addEventListener("click", () => { | |
http.getWithPromise(link).then(data => { | |
console.log(data); | |
}).catch(error => { | |
console.log(error); | |
}); | |
}); | |
buttonAsync.addEventListener("click", () => { | |
logWithAsync(link); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment