Motivation
I remember that once (at some job interview) i was asked to write the Promise implementation by myself.
Since it was long ago, and i dont remember what i wrote then (or if) - I decided to take the challenge again.
So i will write here about the process of implementation step by step.
Class
First of all - i decided to take advantage of ES6 feature - the classes, which makes you to write classes instead of functions:
// using ES6 "class" feature
class MyPromise {
constructor() {
console.log('constructor called');
}
}
const p = new MyPromise();
Executor
One of the most significant specifications of Promise - is that it must receive an "executor" as parameter
Executor must be passed by user and it must be function
I implemented it - by placing executor as a constructor parameter:
class MyPromise {
constructor(executor) {
executor();
}
}
// must get executor fired
const p = new MyPromise(()=>{
console.log('executor fired')
});
Resolve and Reject
A Promise executor must have two parameters - resolve and reject.
These "resolve" and "reject" are promise methods which can be passed as parameters to function where user can inject them according to his needs
// passing "res" and "rej" memebers to executor
class MyPromise {
constructor(executor) {
executor(this.resolve, this.reject);
}
resolve() {
console.log('resolve fired');
}
reject() {
console.log('reject fired');
}
}
const p = new MyPromise((res, rej)=>{
res(); // calling the resolve
});
Then
Until now it was pretty easy...
Now comes the hard part: the "then"
The Promise must return the "then" and "catch" methods in which user should be able to pass success and error callbacks
It is not difficult to get "then" method returned:
class MyPromise {
constructor(executor) {
executor(this.resolve, this.reject);
}
...
...
then() { // then added to "myPromise" object
}
catch(err) {
}
}
The goal here is to get "success" callback to fire if "resolve" method called inside the executorHere where is had 2 difficulties:
- the success callback must be already set when resolve method called (since resolve must trigger it! )
- how to pass "this" into resolve, since it called from "outside"!
I manage to solve the first obstacle by using "setTimeout", to call the executor asyncronously
// then must be returned
class MyPromise {
constructor(executor) {
setTimeout(()=>{executor(() => this.resolve(), () => this.reject());});
}
resolve() {
this.success && this.success(); // this.success should be set before resolve called
}
reject() {
console.log('reject fired');
}
then(cb) {
this.success = cb;
}
catch(err) {
}
}
const p = new MyPromise((res, rej) => {
res();
});
p.then(() => {
console.log(`then callback fired `);
})
Data of Resolve
The last specification i decided to implement - is make "resolve" to able pass data to "success"
Here is what i come with:
// "res" should pass data
class MyPromise {
constructor(executor) {
setTimeout(()=>{executor((d) => this.resolve(d), () => this.reject());});
}
resolve(data) {
this.success(data);
}
reject() {
console.log('reject fired');
}
then(cb) {
this.success = cb;
}
catch(err) {
}
}
const p = new MyPromise((res, rej) => {
res('o'); // "o" is the example data
});
p.then((data) => {
console.log(`then fired ${data}`);
})
Summary
The "creating my own Promise" challenge - made me to think about few interesting question I nave not thought until now
I'm not sure i did the best solution possible here, but now i have motivation to look and search for implementations of better javascript coders ...
