Last active
February 11, 2024 20:45
-
-
Save justyn-clark/519aa45b964b23ff1188dd713955700f to your computer and use it in GitHub Desktop.
Promises
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"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <button id="btn">Make a promise!</button> | |
| <div id="log"></div> | |
| <script src="scripts.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
| 'use strict'; | |
| var promiseCount = 0; | |
| function testPromise() { | |
| var thisPromiseCount = ++promiseCount; | |
| var log = document.getElementById('log'); | |
| log.insertAdjacentHTML('beforeend', thisPromiseCount + | |
| ') Started (<small>Sync code started</small>)<br/>'); | |
| // We make a new promise: we promise the string 'result' (after waiting 3s) | |
| var p1 = new Promise( | |
| // The resolver function is called with the ability to resolve or | |
| // reject the promise | |
| function(resolve, reject) { | |
| log.insertAdjacentHTML('beforeend', thisPromiseCount + | |
| ') Promise started (<small>Async code started</small>)<br/>'); | |
| // This is only an example to create asynchronism | |
| window.setTimeout( | |
| function() { | |
| // We fulfill the promise ! | |
| resolve(thisPromiseCount); | |
| }, 2000); | |
| }); | |
| // We define what to do when the promise is resolved/fulfilled with the then() call, | |
| // and the catch() method defines what to do if the promise is rejected. | |
| p1.then( | |
| // Log the fulfillment value | |
| function(val) { | |
| log.insertAdjacentHTML('beforeend', val + | |
| ') Promise fulfilled (<small>Async code terminated</small>)<br/>'); | |
| }) | |
| .catch( | |
| // Log the rejection reason | |
| function(reason) { | |
| console.log('Handle rejected promise ('+reason+') here.'); | |
| }); | |
| log.insertAdjacentHTML('beforeend', thisPromiseCount + | |
| ') Promise made (<small>Sync code terminated</small>)<br/>'); | |
| } | |
| if ("Promise" in window) { | |
| var btn = document.getElementById("btn"); | |
| btn.addEventListener("click",testPromise); | |
| } else { | |
| var log = document.getElementById('log'); | |
| log.innerHTML = "Live example not available as your browser doesn't support the <code>Promise<code> interface."; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment