JavaScript基础：手写Promise(2)

最新推荐文章于 2024-08-19 22:06:53 发布
最新推荐文章于 2024-08-19 22:06:53 发布
阅读量272 收藏 1
点赞数 2
分类专栏： Javascript 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/imagine_tion/article/details/115153577
版权

在这里插入图片描述

书接上回，本次推文将会继续讲解Promise的开发，以提高异步编程的能力。

一、回顾

上次推文代码回顾：

class MyPromise{
    static PENDING = 'pending';
	static FULFILLED = 'fulfilled';
	static REJECTED = 'rejected';
	constructor(executor){
        this.status = MyPromise.PENDING;
        this.value = null;
        this.callbacks = [];
        try{
            executor(this.resolve.bind(this),this.reject.bind(this));
        } catch{
            this.reject(error);
        }
    }
	resolve(value){
        if(this.status == MyPromise.PENDING){
            this.status = MyPromise.FULFILLED;
            this.value = value;
            this.callbacks.map(callback =>{
            	callback.onFulfilled(value);
        	});
        }
    }
	reject(value){
        if(this.status == MyPromise.PENDING){
            this.status = MyPromise.REJECTED;
            this.value = value;
            this.callbacks.map(callback =>{
            	callback.onRejected(value);
        	});
        }
    }
	
	then(onFulfilled,onRejected) {
    	if(typeof onFulfilled != "function"){
        	onFullfilled = value =>value;
    	}
    	if(typeof onRejected != "function"){
        	onRejected = value => value;
    	}
    	let promise = new MyPromise((resolve,reject) =>{
        	if(this.status == MyPromise.PENDING){
            	this.callbacks.push({
                	onFUlfilled: value =>{
                    	this.parse(onFulfilled(this.value),resolve,reject);
                	},
                	onRejected: value =>{
                    	this.parse(onRejected(this.value),resolve,reject);
                	}
            	});
        	}
        	if(this.status == MyPromise.FULFILLED){
            	setTimeout(()=>{
                	this.parse(onFulfilled(this.value),resolve,reject);
            	});
        	}
        	if(this.status == MyPromise.REJECTED){
            	setTime(()=>{
                	this.parse(onRejected(this.value),resolve,reject);
            	});
        	}
    	});
    	return promise;
	}
	parse(result,resolve,reject){
    	try{
        	if(result instanceof MyPromise){
            	result.then(resolve,reject);
        	}else{
            	resolve(result);
        	}
    	} catch(error){
        	reject(error);
    	}
	}
}

接下来我们实现Promise的静态方法（方法添加到MyPromise类里面）

二、RESOLVE

有时需要将现有对象转为 Promise 对象，Promise.resolve()方法就起到这个作用。

static resolve(value) {
  return new MyPromise((resolve, reject) => {
    if (value instanceof MyPromise) {
      value.then(resolve, reject);
    } else {
      resolve(value);
    }
  });
}

使用普通值的测试：

MyPromise.resolve("前端收割机！！！！").then(value => {
  console.log(value);
});
// 前端收割机！！！！

使用状态为fulfilled的promise值测试：

MyPromise.resolve(
  new MyPromise(resolve => {
    resolve("前端收割机！！！！");
  })
).then(value => {
  console.log(value);
});
// 前端收割机！！！！

使用状态为rejected的Promise测试

MyPromise.resolve(
  new MyPromise((_, reject) => {
    reject("前端收割机！！！！");
  })
).then(
  value => {
    console.log(value);
  },
  reason => {
    console.log(reason);
  }
);
// 前端收割机！！！！
三、REJECT

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

下面定义Promise的rejecte方法

static reject(reason) {
  return new MyPromise((_, reject) => {
    reject(reason);
  });
}

使用测试

MyPromise.reject("rejected").then(null, reason => {
  console.log(reason);
});
// rejected
四、ALL

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);

上面代码中，Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

下面来实现Promise的all方法

static all(promises) {
  let resolves = [];
  return new MyPromise((resolve, reject) => {
    promises.forEach((promise, index) => {
      promise.then(
        value => {
          resolves.push(value);
          if (resolves.length == promises.length) {
            resolve(resolves);
          }
        },
        reason => {
          reject(reason);
        }
      );
    });
  });
}

来对所有Promise状态为fulfilled的测试：

let p1 = new MyPromise((resolve, reject) => {
  resolve("前端收割机");
});
let p2 = new MyPromise((resolve, reject) => {
  resolve("前端收割机");
});
let promises = MyPromise.all([p1, p2]).then(
  promises => {
    console.log(promises);
  },
  reason => {
    console.log(reason);
  }
);
// ["前端收割机","前端收割机"]

使用我们写的resolve进行测试:

let p1 = MyPromise.resolve("前端收割机1");
let p2 = MyPromise.resolve("前端收割机2");
let promises = HD.all([p1, p2]).then(
  promises => {
    console.log(promises);
  },
  reason => {
    console.log(reason);
  }
);
// ["前端收割机1","前端收割机2"]

其中一个Promise为rejected时的效果:

let p1 = MyPromise.resolve("前端收割机");
let p2 = MyPromise.reject("rejected");
let promises = MyPromise.all([p1, p2]).then(
  promises => {
    console.log(promises);
  },
  reason => {
    console.log(reason);
  }
);
// rejected
五、RACE

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.race([p1, p2, p3]);

上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

Promise.race()方法的参数与Promise.all()方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resolve()方法，将参数转为 Promise 实例，再进一步处理。

下面实现Promise的race方法

static race(promises) {
  return new MyPromise((resolve, reject) => {
    promises.map(promise => {
      promise.then(value => {
        resolve(value);
      });
    });
  });
}

我们来进行测试

let p1 = MyPromise.resolve("前端收割机1");
let p2 = MyPromise.resolve("前端收割机2");
let promises = MyPromise.race([p1, p2]).then(
  promises => {
    console.log(promises);
  },
  reason => {
    console.log(reason);
  }
);
// 前端收割机1

使用延迟Promise后的效果

let p1 = new MyPromise(resolve => {
  setInterval(() => {
    resolve("前端收割机1");
  }, 2000);
});
let p2 = new MyPromise(resolve => {
  setInterval(() => {
    resolve("前端收割机2");
  }, 1000);
});
let promises = MyPromise.race([p1, p2]).then(
  promises => {
    console.log(promises);
  },
  reason => {
    console.log(reason);
  }
);
// 前端收割机2
六、MyPromise整体代码

下面就是这两次推文中手写Promise的整体代码，MyPromise的功能还不能完整模仿Promise的功能，真实的Promise中还具有Promise.try()、Promise.any()、Promise.allSettled()等静态方法，有兴趣的小伙伴可以自行尝试，这两节推文讲解Promise的开发，主要是提高异步编程的能力，以及对于Promise的理解。

class MyPromise{
    static PENDING = 'pending';
	static FULFILLED = 'fulfilled';
	static REJECTED = 'rejected';
	constructor(executor){
        this.status = MyPromise.PENDING;
        this.value = null;
        this.callbacks = [];
        try{
            executor(this.resolve.bind(this),this.reject.bind(this));
        } catch{
            this.reject(error);
        }
    }
	resolve(value){
        if(this.status == MyPromise.PENDING){
            this.status = MyPromise.FULFILLED;
            this.value = value;
            this.callbacks.map(callback =>{
            	callback.onFulfilled(value);
        	});
        }
    }
	reject(value){
        if(this.status == MyPromise.PENDING){
            this.status = MyPromise.REJECTED;
            this.value = value;
            this.callbacks.map(callback =>{
            	callback.onRejected(value);
        	});
        }
    }
	
	then(onFulfilled,onRejected) {
    	if(typeof onFulfilled != "function"){
        	onFullfilled = value =>value;
    	}
    	if(typeof onRejected != "function"){
        	onRejected = value => value;
    	}
    	let promise = new MyPromise((resolve,reject) =>{
        	if(this.status == MyPromise.PENDING){
            	this.callbacks.push({
                	onFUlfilled: value =>{
                    	this.parse(onFulfilled(this.value),resolve,reject);
                	},
                	onRejected: value =>{
                    	this.parse(onRejected(this.value),resolve,reject);
                	}
            	});
        	}
        	if(this.status == MyPromise.FULFILLED){
            	setTimeout(()=>{
                	this.parse(onFulfilled(this.value),resolve,reject);
            	});
        	}
        	if(this.status == MyPromise.REJECTED){
            	setTime(()=>{
                	this.parse(onRejected(this.value),resolve,reject);
            	});
        	}
    	});
    	return promise;
	}
	parse(result,resolve,reject){
    	try{
        	if(result instanceof MyPromise){
            	result.then(resolve,reject);
        	}else{
            	resolve(result);
        	}
    	} catch(error){
        	reject(error);
    	}
	}

	static resolve(value) {
  		return new MyPromise((resolve, reject) => {
    		if (value instanceof MyPromise) {
      			value.then(resolve, reject);
    		} else {
      			resolve(value);
    		}
  		});
	}
	
	static reject(reason) {
  		return new MyPromise((_, reject) => {
    		reject(reason);
  		});
	}

	static all(promises) {
  		let resolves = [];
  		return new MyPromise((resolve, reject) => {
    		promises.forEach((promise, index) => {
      			promise.then(
        			value => {
          				resolves.push(value);
          				if (resolves.length == promises.length) {
            			resolve(resolves);
          				}
        			},
        			reason => {
          			reject(reason);
        			}
      			);
    		});
  		});
	}
	
	static race(promises) {
  		return new MyPromise((resolve, reject) => {
    		promises.map(promise => {
      			promise.then(value => {
        			resolve(value);
      			});
    		});
  		});
	}
	
}
深入理解 JavaScript 中的 Promise ：从基础概念到进阶用法、手写promise
Allen-
07-10 3637
Promise是JavaScript中的一种对象，用于表示一个在未来某个时间点才会完成（或失败）的异步操作及其结果。它提供了一种处理异步操作的统一接口，使代码更加简洁和易于理解。与传统的回调函数相比，Promise能够更好地处理异步操作的结果和错误。Promise作为JavaScript中处理异步操作的一种重要机制，极大地简化了代码编写和异步流程控制。
MyPromise:手写 Promise
04-08
tip2 如果返回一个 new Promise 且.then 我们不做特殊处理的话 打印出来 会是一个 LPromise 的实例 const p1 = new LPromise((resolve, reject) => { resolve('解决') }).then(res => { return new LProm
【手写Promise】
热门推荐
weixin_49487698的博客
05-16 1万+
一、JS的错误 1、错误的类型 2、错误处理 3、错误对象 <!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
手写promise
dtbk123的博客
06-22 289
//promise三种状态（运行中，执行成功，执行失败） const PENDING='pending' const RESOLVE='fulfilled' const REJECTED='rejected' function MyPromise(executor){ this.data=undefined this.Fullcallback=[]//存放成功的回调 this.Failedcallback=[]//存放失败的回调 this.status=PENDIN.
手写实现promise的then方法
最新发布
weixin_43314255的博客
08-19 124
/ 4. 定义状态常量（成功fulfilled 失败rejected 等待pending），初始化为pending。// })// 1 创建MyPromise类// 2 通过构造函数constructor，在执行这个类的时候需要传递一个执行器进去并立即调用try {if (value!})} else {returntry {} else {#run() {resolve,reject})})// 处理promise返回值各种类型情况（普通值，promise）
深入理解JavaScript：手写Promise实现原理
下面是一个简化版的手写promise的示例代码，其中包含了最基本的链式调用功能和状态控制。 ```javascript class MyPromise { constructor(executor) { // 初始化状态为pending this.status = 'pending'; // 成功...
js-Promise：手写系列手写promise，vue ..
02-21
const promises = [promise1, promise2, promise3]; Promise.all(promises) .then(values => { // 所有 Promise 成功后的处理 }) .catch(errors => { // 任意一个 Promise 失败后的处理 }); ``` ### 6. ...
rewrite:手写的Promise调用apply等，JavaScript版数据结构与算法
03-30
本文将深入探讨“rewrite”项目中的手写Promise实现，以及如何使用apply和call方法，这些都是JavaScript版数据结构与算法的重要知识点。 首先，Promise的核心在于它的三种状态：pending（等待中）、fulfilled（已...
手写Promise
韩吉鑫的博客
07-23 190
promise
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值