ES6 feature: Promise (custom encapsulation)

promise Custom encapsulation

Custom encapsulation resolve and reject

• Promise.js

//  Declaration constructor 
function Promise(executor){
    
	//  Add properties to the object 
	this.PromiseState = 'pending';
	this.PromiseResult = null; //  Deposit promise The result of the object 
	//  Used to handle the execution of asynchronous task callback , Array is used to specify multiple callbacks 
	this.callbacks = [], 
	
	//  Save the this value 
	const self = this;
	
	//  Definition resolve function 
	function resolve(data){
    
		//  Judge the state , Give Way promise Object state can only be changed once 
		if(self.PromiseState !== 'pending') return ;
		
		//  Modify the state of the object （promiseState）
		this.PromiseState = 'fullfilled'; //  perhaps resolved
		
		//  Set the object result value （promiseResult）
		this.PromiseResult = data;

		//  Call the successful callback function , Use forEach In order that the result of the chain call will not be overwritten 
		setTimeout(() => {
    
			self.callbacks.forEach(item => {
    
				item.onResolved(data);
			})
		})
	}
	
	//  Definition reject function 
	function reject(data){
    
		//  Judge the state , Give Way promise Object state can only be changed once 
		if(self.PromiseState !== 'rejected') return ;
		
		//  Modify the state of the object （promiseState）
		this.PromiseState = 'rejected'; //  perhaps resolved
		
		//  Set the object result value （promiseResult）
		this.PromiseResult = data;
			
		//  Call the failed callback function 
		setTimeout(() => {
    
			self.callbacks.forEach(item => {
    
				item.onRejected(data);
			})
		})
	}
	
	// throw Throw exception handling 
	//  A synchronous invocation 【 Actuator functions 】
	try{
    
		executor(resolve,reject);
	}catch(e){
    
		//  modify promise The object status is failed 
	    reject(e);
	}
}

//  Customize then() Method 
Promise.prototype.then = function((onResolved,onRejected) => {
    

	const self = this;
	
	//  Determine the callback function parameters （ The principle of realizing exception penetration ）
	if(typeof onRejected !== 'function'){
    
		onRejected = reason => {
    
			throw reason	
		}	
	}

	if(typeof onResolved !== 'function'){
    
		onResolved = value => value;
	}
	
	return new Promise((resolve,reject)=>{
    
		//  Packaging function 
		function callback(type){
    
			try{
    
				//  Get the execution result of the callback function 
				let result = type(self.PromiseResult);
				//  Judge 
				if(result instanceof Promise){
    
					//  If it is promise Object of type 
					result.then(v => {
    
						resolve(v);	
					},r => {
    
						reject(r);
					})
				}else {
    
					resolve(result)	
				}
			}catch(e){
    
				reject(e);
			}
		}
		
		if(this.PromiseState === 'fullfilled'){
    
			setTimeout(() => {
    
				callback(onResolved)
			})
		}
		
		if(this.PromiseState === 'rejected'){
    
			setTimeout(() => {
    
				callback(onRejected)
			})
		}
		
		//  Judge pending state 
		if(this.PromiseState === 'pending'){
    
			//  Save callback function 
			this.callbacks.push({
    
				onResolved:function(){
    
					callback(onResolved)
				},
				onRejected:function(){
    
					callback(onRejected)
				},
			})
		}
	})
})

Promise.prototype.catch = function(onRejected){
    
	return this.then(undefined,onRejected);
}

//  Package static resolve Method 
Promise.resolve = function(value){
    
	//  return promise object 
	return new Promise((resolve,reject) => {
    
		if(value instanceof Promise){
    
			value.then(v => {
    
				resolve(v);
			},r => {
    
				reject(r);
			})
		}else {
    
			resolve(value);	
		}
	}
}

//  Package static reject() Method 
Promise.reject = function (error){
    
	return new Promise((resolve,reject) => {
    
		reject(error);
	})
}

//  Package static all() Method 
Promise.all = function(promises){
    
	//  The return result is promise object 
	return new Promise((resolve,reject) => {
    
		//  Count variables 
		let count = 0;
		//  An array of successful results 
		let arr = [];
		for(let i = 0; i<promises.length; i++){
    
			promises[i].then(v => {
    
				//  Every promise Execute a successful callback when both are successful 
				count++;
				//  Store the results in the array 
				arr[i] = v;
				//  If count Results and promises The length of the array is the same 
				if(count === promises.length){
    
					//  take arr Array as a result 
					resolve(arr);	
				}
			},r=>{
    
				reject(r)
			})
		}
	});
}

//  encapsulation race Method 
Promise.race = function(promise){
    
	return new Promise((resolve,reject) => {
    
		for(let i = 0; i<promises.length; i++){
    
			promises[i].then(v => {
    
				resolve(v);
			},r => {
    
				reject(r);
			})
		}
	})
}

• index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
	<script src="./promise.js"></script>
<body>
    <script> let p = new Promise((resolve,reject) => {
       resolve('ok'); }); p.then(value => {
       console.log(value) },error => {
       console.log(error) }) </script>
</body>
</html>

• take promise.js Encapsulation into classes class

class Promise{
    
	constructor(executor){
    
		//  Add properties to the object 
		this.PromiseState = 'pending';
		this.PromiseResult = null; //  Deposit promise The result of the object 
		//  Used to handle the execution of asynchronous task callback , Array is used to specify multiple callbacks 
		this.callbacks = [], 
		
		//  Save the this value 
		const self = this;
		
		//  Definition resolve function 
		function resolve(data){
    
			//  Judge the state , Give Way promise Object state can only be changed once 
			if(self.PromiseState !== 'pending') return ;
			
			//  Modify the state of the object （promiseState）
			this.PromiseState = 'fullfilled'; //  perhaps resolved
			
			//  Set the object result value （promiseResult）
			this.PromiseResult = data;
	
			//  Call the successful callback function , Use forEach In order that the result of the chain call will not be overwritten 
			setTimeout(() => {
    
				self.callbacks.forEach(item => {
    
					item.onResolved(data);
				})
			})
		}
		
		//  Definition reject function 
		function reject(data){
    
			//  Judge the state , Give Way promise Object state can only be changed once 
			if(self.PromiseState !== 'rejected') return ;
			
			//  Modify the state of the object （promiseState）
			this.PromiseState = 'rejected'; //  perhaps resolved
			
			//  Set the object result value （promiseResult）
			this.PromiseResult = data;
				
			//  Call the failed callback function 
			setTimeout(() => {
    
				self.callbacks.forEach(item => {
    
					item.onRejected(data);
				})
			})
		}
		
		// throw Throw exception handling 
		//  A synchronous invocation 【 Actuator functions 】
		try{
    
			executor(resolve,reject);
		}catch(e){
    
			//  modify promise The object status is failed 
		    reject(e);
		}
	}
	
	then(onResolved,onRejected){
    
		const self = this;
	
		//  Determine the callback function parameters （ The principle of realizing exception penetration ）
		if(typeof onRejected !== 'function'){
    
			onRejected = reason => {
    
				throw reason	
			}	
		}
	
		if(typeof onResolved !== 'function'){
    
			onResolved = value => value;
		}
		
		return new Promise((resolve,reject)=>{
    
			//  Packaging function 
			function callback(type){
    
				try{
    
					//  Get the execution result of the callback function 
					let result = type(self.PromiseResult);
					//  Judge 
					if(result instanceof Promise){
    
						//  If it is promise Object of type 
						result.then(v => {
    
							resolve(v);	
						},r => {
    
							reject(r);
						})
					}else {
    
						resolve(result)	
					}
				}catch(e){
    
					reject(e);
				}
			}
			
			if(this.PromiseState === 'fullfilled'){
    
				setTimeout(() => {
    
					callback(onResolved)
				})
			}
			
			if(this.PromiseState === 'rejected'){
    
				setTimeout(() => {
    
					callback(onRejected)
				})
			}
			
			//  Judge pending state 
			if(this.PromiseState === 'pending'){
    
				//  Save callback function 
				this.callbacks.push({
    
					onResolved:function(){
    
						callback(onResolved)
					},
					onRejected:function(){
    
						callback(onRejected)
					},
				})
			}
		})
	}
	
	catch(onRejected){
    
		return this.then(undefined,onRejected);
	}
	
	//  Package static resolve Method 
	static resolve(value){
    
		//  return promise object 
		return new Promise((resolve,reject) => {
    
			if(value instanceof Promise){
    
				value.then(v => {
    
					resolve(v);
				},r => {
    
					reject(r);
				})
			}else {
    
				resolve(value);	
			}
		}
	}

	//  Package static reject() Method 
	static reject(error){
    
		return new Promise((resolve,reject) => {
    
			reject(error);
		})
	}

	//  Package static all() Method 
	static all(promises){
    
		//  The return result is promise object 
		return new Promise((resolve,reject) => {
    
			//  Count variables 
			let count = 0;
			//  An array of successful results 
			let arr = [];
			for(let i = 0; i<promises.length; i++){
    
				promises[i].then(v => {
    
					//  Every promise Execute a successful callback when both are successful 
					count++;
					//  Store the results in the array 
					arr[i] = v;
					//  If count Results and promises The length of the array is the same 
					if(count === promises.length){
    
						//  take arr Array as a result 
						resolve(arr);	
					}
				},r=>{
    
					reject(r)
				})
			}
		});
	}

	//  encapsulation race Method 
	static race (promise){
    
		return new Promise((resolve,reject) => {
    
			for(let i = 0; i<promises.length; i++){
    
				promises[i].then(v => {
    
					resolve(v);
				},r => {
    
					reject(r);
				})
			}
		})
	}
}