Understanding Promise by creating your own: Part 1

Promise in JavaScript is an abstraction which is used for asynchronous programming.

It is a construct which promises a value in future.

Its is an object which has a state. It can be in state unresolved, resolved or rejected. It can go from unresolved to resolved or rejected. It can’t go back. You can listen to the state transition by registering listeners using then and catch on the promise object.

Lets see an example

let p1 = new Promise(function(resolve,reject){
   setTimeout(resolve(10),100);
});
p1.then(function(result){
  console.log(result);//10
}).catch(function(error){
  console.log(error);
})

The Promise constructor accepts a executor function, which is called by the Promise constructor with two arguments resolve and reject(functions). The executor function can finish its task and when a value is available it can call resolve with that value or if there is an error then call reject with the error.

The promise object(p1) exposes methods then and catch. then is used to subscribe to the promise when it is resolved. So when the Promise is resolved the function passed to then is called with the resolved value. Similarly catch is used to subscribe for an error. Please note how then and catch are chained. In fact we can interchange the order of then and catch.(There is a lot more to promise chaining. We can chain multiple promises and have a single catch at the end. If you did not get that yet, don’t worry, we will deep dive into Promise chaining later.)

So lets try to implement our own Promise which does this much for now. Lets call our own implementation MyPromise

function MyPromise(executor){
  this.state = 'initial';
  this.value = undefined;
  this.onValue = null;
  this.onError = null;
  executor(resolve.bind(this),reject.bind(this)); 
}
MyPromise.prototype = {
 then: function(handler){
  this.onValue = handler;
  return this;
 },
 catch:function(handler){
  this.onError = handler;
  return this;
 }
}
//please not that below are not global function but private inside //our file
function resolve(value){
  this.state = 'resolved';
  this.value = value;
  if(this.onValue){
     this.onValue(value);
  }
}
function reject(error){
 this.state = 'rejected';
 this.error = error;
 if(this.onError){
     this.onError(error);
  }
}

Lets try to understand above code. You would need to have a understanding of how to create constructors(class without class keyword) in JavaScript to understand this code.

MyPromise constructor initializes the state to ‘initial’. It defines the value, onValue and onError handlers to null. it then calls the executor function with resolve and reject methods. We bind the the resolve and reject methods with this(current object) as they would be called without any context( you would need to understand the concept of this in javascript for this).

Further the then and catch simply register the corresponding handlers. They also return the current object so that chaining can happen.

The resolve and reject method simply check if the the corresponding handlers(onValue/onError) are registered. And if found then are they are called.

So far so good. In Part 2 we will learn few more things about Promise and add those features to our implementation.

Next Part : https://medium.com/javascript-bytes/understanding-promise-by-creating-you-own-part-2-bf0a1a0a42a4