Javascript promises handling asynchronous callbacks has been a common feature, and most browsers now support native Promises. The following uses es6 class syntax to implement a simpler promise.

Define a Promise class that the constructor method executes at instantiation time, passing in a callback to this.calllback.

The 2 then method takes two parameters, a successful method and a failed method, stored in the instance attributes fullfilledFunc and errorFunc

The error method takes one argument, but the second argument passed by the then method does the same thing, providing multiple ways to pass an error callback

If the then and error methods bind to this. Callback, then and error methods bind to this.

class Promise1{  constructor(callback) { 
  this.callback=callback;
  this.fullfilledFunc; 
  this.errorFunc; 
 }
 then(fullfilled,errorFunc){ 
  this.fullfilledFunc=fullfilled || (()=>{});
  this.errorFunc=errorFunc || (()=>{});           this.callback(this.fullfilledFunc,this.errorFunc)       
 return this; 
 }
 error(errorFunc){ 
  this.errorFunc=errorFunc || (()=>{});           this.callback(this.fullfilledFunc,this.errorFunc)  
 return this; 
}
Copy the code

Use as follows:

var fn =new Promise((resolve,reject)=>{  setTimeout(()=>{ 
 // resolve("Complete") 
 reject("There has been a mistake.")    },1000)
})
fn.then((val)=>{ 
 console.log(val) 
}).error(()=>{ 
 console.log('An error has occurred')})Copy the code
The implementation above, just a few ideas from es6 classes and functional programming, implements a simple promise. Native Promises are stateful. Resolve is executed only once, reject is executed complete, or reject is executed failed. The above implementation has no way to do this because the implementation of resolve and Reject is not known inside a promise. So implement stateful promises in the following way.



1 Define a state in the Promise class, this.state

2 Define the instance method handleFullfill to check whether the status has changed. If not, run this.fullfillFunc to change the status to fullfilled

3 Define the instance method handleError to determine whether the state has changed. If it has not, run this.errorFunc to change the state to Errored

This has the advantage of placing the resolve and Reject definitions in the promise instance method, and internally changing the state as it executes

class Promise {  constructor(callback) { 
  this.callback=callback; 
  this.fullfillFunc; 
  this.errorFunc; 
  this.state; 
 } 


 then(fullfilled,errorFunc){ 
  this.fullfillFunc=fullfilled || (()=>{}); 
  this.errorFunc=errorFunc || (()=>{});   
  this.callback(this.handleFullfill.bind(this),this.handleError.bind(this)) 
  return this; 
 } 
 error(errorFunc){ 
  this.errorFunc=errorFunc || (()=>{});                     
  this.callback(this.handleFullfill.bind(this),this.handleError.bind(this))          
  return this; 
 } 
 handleFullfill() {if(! this.state){let params = [].slice.call(arguments,0) 
   this.state="fullfilled"this.fullfillFunc.apply(null,params); }}handleError() {if(! this.state){letParams = [].slice.call(arguments,0,1) console.log(new Error(params[0])) this.state="errored"this.errorFunc.apply(null,params);; }}}Copy the code



The above is to realize a Promise with state, although the brief introduction, but can learn some features of JS programming