js异步-手写一个promise

最新推荐文章于 2024-11-09 15:29:59 发布

Caroline_x

最新推荐文章于 2024-11-09 15:29:59 发布

阅读量322

点赞数

分类专栏： js基础

本文链接：https://blog.youkuaiyun.com/Caroline_x/article/details/104963259

版权

js基础专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何手写一个Promise，包括其基本功能和扩展特性。Promise对象代表异步操作，拥有pending、fulfilled和rejected三种状态，状态一旦改变不可逆。then方法接收成功和失败回调，当Promise状态变为fulfilled或rejected时，对应的回调会被调用。此外，Promise支持多次调用then，并允许resolve处于异步环境中。在实现过程中，确保了在异步操作完成时正确触发回调并传递正确参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手写一个promise

Promise使用例子：

let p = new Promise(（resolve,reject）=>{
	//do some thing 
	let res = 'any';
	resolve(res);
}}
p.then(res=>{
	//res是接到从resolve来的值
	console.log(res);
},err=>{
	console.log(err)
})

基本功能：

1.promise是一个类，有then方法
2.new的时候传进去一个执行器，执行器有resolve和reject两个函数
3.then方法里传进去两个函数，分别对应resolve的回调和reject回调

上述功能具体实现：

class Promise{
	//actuator是new的时候传进来的执行器
	constructor(actuator){
		let resolve = ()=>{};
		let reject = ()=>{};
		actuator(resolve ,reject)
	}
	then(succBack,errBack){
		succBack();
		errBack()
	}
}

在基本功能的基础上添加功能：

1.Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。.resolve后状态是fulfilled，reject后状态是rejected ；
2.resolve出来的值作为succBack的参数；reject出来的值作为errBack的参数；
3.Promise的状态从 pending 改为 fulfilled/rejected 就不能被改变；

class Promise{
	//actuator是new的时候传进来的执行器
	constructor(actuator){
		//初始进来是pending态
		this.status = 'pending';
		//返回值
		this.value = null;
        this.err = null;
		let resolve = ()=>{
			//只能被改变一次
			if(this.status === 'pending'){
				this.value = val;
				this.status = 'fulfilled';
			}
		};
		let reject = ()=>{
			if(this.status === 'pending'){
                this.err = err;
                this.status = 'rejected';
            }
		};
		actuator(resolve ,reject)
	}
	then(succBack,errBack){
		//then里回调函数传参是成功或失败时被赋值的
		succBack(this.value);
		errBack(this.err)
	}
}

继续添加功能：

1.同一个promise可以多次调用then
2.resolve可以包在一个异步里
如：

var p = new Promise((res,rej)=>{
	setTimeout(()=>{
        res(2)
	},666)
})
p.then(val=>{
	console.log(val);
});
p.then(val=>{
	console.log(val);
});

实现功能：
异步里写resolve，用上面的类实现会立即调用then里的回调函数，参数是未赋值的this.value；
异步实现时多个then就需要一个回调列表实现，调用的时机就是resolve的时候，而不是在then里调用；

class Promise16{
	constructor(actuator){
		this.status = 'pending';
		this.value = null;
        this.err = null;
        //异步多次then调用时候就用到回调列表
		this.fulfillList = [];
		this.rejectList = [];
		let resolve=(val)=>{
			if(this.status === 'pending'){
				this.value = val;
				this.status = 'fulfilled';
				//当resolve被调用时将列表里的方法依次调用
				this.fulfillList.forEach(fn=>fn());
			}
			
		}
		let reject=(err)=>{
			if(this.status === 'pending'){
                this.err = err;
                this.status = 'rejected';
				this.rejectList.forEach(fn=>fn());
            }
		}
        actuator(resolve,reject);
	}
	then(succBack,errBack){
		
		if(this.status === 'pending'){
			//当异步时候，then调用时候resolve还没有执行，将回调函数保存起来，异步结束时resolve里执行
			this.fulfillList.push(()=>{succBack(this.value)});
			this.rejectList.push(()=>{errBack(this.err)});
		}else{
			this.status === 'fulfilled' && succBack(this.value);
			this.status === 'rejected' && errBack(this.err);
		}
		
		
	}
}

var p = new Promise((res,rej)=>{
	setTimeout(()=>{
        res(2)
	},666)
	
})
p1.then(val=>{
	console.log(val);
},err=>{
	console.log(err);
});