Last active
October 30, 2018 16:24
-
-
Save lei-clearsky/c14cf16c282eb3f72f07a98265761513 to your computer and use it in GitHub Desktop.
Simple Promise
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
| // https://levelup.gitconnected.com/understand-javascript-promises-by-building-a-promise-from-scratch-84c0fd855720 | |
| // http://thecodebarbarian.com/write-your-own-node-js-promise-library-from-scratch.html | |
| class PromiseSimple { | |
| constructor(executionFunc) { | |
| this.chains = []; | |
| this.handleError = () => { console.log('err!'); }; | |
| this.onResolve = this.onResolve.bind(this); | |
| this.onReject = this.onReject.bind(this); | |
| executionFunc(this.onResolve, this.onReject); | |
| } | |
| then(nextFunc) { | |
| this.chains.push(nextFunc); | |
| return this; | |
| } | |
| catch(errFunc) { | |
| this.handleError = errFunc; | |
| return this; | |
| } | |
| onResolve(value) { | |
| let storedValue = value; | |
| try { | |
| this.chains.forEach((nextFunc) => { | |
| storedValue = nextFunc(storedValue); | |
| }); | |
| } catch(error) { | |
| this.chains = []; | |
| this.onReject(error); | |
| } | |
| } | |
| onReject(error) { | |
| this.handleError(error); | |
| } | |
| } | |
| fakeApiBackend = () => { | |
| const user = { | |
| username: 'treyhuffine', | |
| favoriteNumber: 42, | |
| profile: 'https://gitconnected.com/treyhuffine' | |
| }; | |
| // Introduce a randomizer to simulate the | |
| // the probability of encountering an error | |
| if (Math.random() > .05) { | |
| return { | |
| data: user, | |
| statusCode: 200, | |
| }; | |
| } else { | |
| const error = { | |
| statusCode: 404, | |
| message: 'Could not find user', | |
| error: 'Not Found', | |
| }; | |
| return error; | |
| } | |
| }; | |
| // Assume this is your AJAX library. Almost all newer | |
| // ones return a Promise Object | |
| const makeApiCall = () => { | |
| return new PromiseSimple((resolve, reject) => { | |
| setTimeout(() => { | |
| const apiResponse = fakeApiBackend(); | |
| if (apiResponse.statusCode >= 400) { | |
| reject(apiResponse); | |
| } else { | |
| resolve(apiResponse.data); | |
| } | |
| }, 5000); | |
| }); | |
| }; | |
| makeApiCall() | |
| .then((user) => { | |
| console.log('In the first .then()'); | |
| return user; | |
| }) | |
| .then((user) => { | |
| console.log(`User ${user.username}'s favorite number is ${user.favoriteNumber}`); | |
| return user; | |
| }) | |
| .then((user) => { | |
| console.log('The previous .then() told you the favoriteNumber') | |
| return user.profile; | |
| }) | |
| .then((profile) => { | |
| console.log(`The profile URL is ${profile}`); | |
| }) | |
| .then(() => { | |
| console.log('This is the last then()'); | |
| }) | |
| .catch((error) => { | |
| console.log(error.message); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment