JavaScript基础：手写Promise（1）

最新推荐文章于 2023-04-10 15:51:13 发布
最新推荐文章于 2023-04-10 15:51:13 发布
阅读量194 收藏 2
点赞数 2
分类专栏： Javascript 文章标签： javascript js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/imagine_tion/article/details/115103533
版权

在这里插入图片描述

一、构建

本次推文将会手写开发Promise实现，提升异步编程的能力。

首先声明定义类并声明Promise状态与值，有以下几个细节需要注意。

  • executor为执行者
  • 当执行者出现异常时触发拒绝状态
  • 使用静态属性保存状态值
  • 状态只能改变一次，所以在resolve与reject添加条件判断
  • 因为 resolve或rejected方法在executor中调用，作用域也是executor作用域，这会造成this指向window，现在我们使用的是class定义，this为undefined
class MyPromise{
    static PENDING = 'pending';
	static FULFILLED = 'fulfilled';
	static REJECTED = 'rejected';
	constructor(executor){
        this.status = MyPromise.PENDING;
        this.value = null;
        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;
        }
    }
	reject(value){
        if(this.status == MyPromise.PENDING){
            this.status = MyPromise.REJECTED;
            this.value = value;
        }
    }
}

案例代码测试：

<script src ="MyPromise.js"></script>
<script>
    let goodJob = new MyPromise((resolve,reject)=>{
        resolve("前端收割机！！！！")
    });
    console.log(goodJob); //前端收割机！！！！
</script>

二、THEN

现在添加then方法来处理状态的改变，有以下几点说明

  1. then可以有两个参数，即成功和错误时的回调函数
  2. then的函数参数都不是必须的，所以需要设置默认值为函数，用于处理当没有传递时情况
  3. 当执行then传递的函数发生异常时，统一交给onRejected来处理错误
1.基础构建
then(onFulfilled,onRejected){
    if(typeof onFulfilled != "function"){
        onFulfilled = value => value;
    }
    if(typeof onRejected != "function"){
        onRejected = value => value;
    }
    if(this.status == MyPromise.FULFILLED){
        try{
            onFulfilled(this.value);
        } catch{
            onRejected(error);
        }
    }
    if(this.status == MyPromise.REJECTED){
        try{
            onRejected(this.value);
        } catch{
            onRejected(error);
        }
    }
}

案例代码测试（then方法代码放进MyPromise类中）：

<script src ="MyPromise.js"></script>
<script>
    let goodJob = new MyPromise((resolve,reject)=>{
        resolve("前端收割机！！！！")
    }).then(
        value =>{
            console.log(value);
        },
        reason =>{
            console.log(reason);
        }
    );
	console.log("我是主线程执行的console.log!");

	// 前端收割机！！！！
	// 我是主线程执行的console.log!
</script>
2.异步任务

前面代码中的then方法可以正常执行，但代码产生的Promise并不是异步的，所以我们需要使用setTimeout来将onFulfilled与onRejected做为异步宏任务执行。

then(onFulfilled,onRejected){
    if(typeof onFulfilled != "function"){
        onFulfilled = value => value;
    }
    if(typeof onRejected != "function"){
        onRejected = value => value;
    }
    if(this.status == MyPromise.FULFILLED){
        setTimeout(()=>{
            try{
                onFulfilled(this.value);
            } catch(error){
                onRejected(error);
            }
        });
    }
    if(this.status == MyPromise.REJECTED){
        setTimeout(()=>{
            try{
                onRejected(this.value);
            } catch{
                onRejected(error);
            }
        });
    }
}

案例代码测试（Promise异步执行）：

<script src ="MyPromise.js"></script>
<script>
    let goodJob = new MyPromise((resolve,reject)=>{
        resolve("前端收割机！！！！")
    }).then(
        value =>{
            console.log(value);
        },
        reason =>{
            console.log(reason);
        }
    );
	console.log("我是主线程执行的console.log!");

	// 我是主线程执行的console.log!
	// 前端收割机！！！！
</script>
3.PENDING状态

目前then方法无法处理promise为pending时的状态

...
let goodJob = new MyPromise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("前端收割机！！！！");
    });
})
...

所以为了处理上述情况，需要进行几点改动

  • 在构造函数中添加callback来保存pending状态时的处理函数，当状态改变时循环调用。

    constructor(executor){
    ...
    this.callbacks = [];
    ...
}

  • 将then方法的回调函数添加到callback数组中，用于异步执行。

    then(onFulfilled,onRejected){
    if(typeof onFulfilled != "function"){
        onFulfilled = value => value;
    }
    if(typeof onRejected != "function"){
        onRejected = value => value;
    }
    if(this.status == MyPromise.PENDING){
        this.callbacks.push({
            onFulfilled: value =>{
                try{
                    onFulfilled(value);
                } catch(error){
                    onRejected(error);
                }
            },
            onRejected: value =>{
                try{
                    onRejected(value);
                } catch(error){
                    onRejected(error);
                }
            }
        });
    }
    ...
}

  • resolve方法和reject方法中添加处理callback方法的代码。

  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);
          });
      }
  }
4.PENDING异步

执行以下代码发现并不是异步操作，应该先输出 “我要先执行!” 然后是 “前端收割机！！！！”。

<script src ="MyPromise.js"></script>
<script>
    let goodJob = new MyPromise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("前端收割机！！！！")
        	console.log("我要先执行!");
        })
    }).then(
        value =>{
            console.log(value);
        },
        reason =>{
            console.log(reason);
        }
    );

	// 前端收割机！！！！
	// 我要先执行!
</script>

解决以上问题，只需要将resolve与reject执行通过setTimeout定义为异步任务。

resolve(value){
    if(this.status == MyPromise.PENDING){
        this.status = MyPromise.FULFILLED;
        this.value = value;
        setTimeout(()=>{
            this.callbacks.map(callback =>{
            	callback.onFulfilled(value);
        	});
        })
    }
}
reject(value){
    if(this.status == MyPromise.PENDING){
        this.status = MyPromise.REJECTED;
        this.value = value;
        setTimeout(()=>{
            this.callbacks.map(callback =>{
            	callback.onRejected(value);
        	});
        })
    }
}

三、链式操作

Promise中的then是链式调用执行的，所以then也要返回Promise才能实现

  1. then的onReject函数是对前面Promise的rejected的处理
  2. 但该Promise返回状态要为fulfilled，所以在调用onRejected后改变当前promise为fulfilled状态
then(onFulfilled,onRejected) {
    if(typeof onFulfilled != "function"){
        onFullfilled = value =>value;
    }
    if(typeof onRejected != "function"){
        onRejected = value => value;
    }
    return new MyPromise((resolve,reject) =>{
        if(this.status == MyPromise.PENDING){
            this.callbacks.push({
                onFUlfilled: value =>{
                    try{
                        let  result = onFulfilled(value);
                        resolve(result);
                    } catch(error){
                        reject(error);
                    }
                },
                onRejected: value =>{
                    try{
                        let result = onRejected(value);
                        resolve(result);
                    } catch(error){
                        reject(error);
                    }
                }
            });
        }
        if(this.status == MyPromise.FULFILLED){
            setTimeout(()=>{
                try{
                    let result = onFulfilled(this.value);
                    resolve(result);
                } catch(error){
                    reject(error);
                }
            });
        }
        if(this.status == MyPromise.REJECTED){
            setTime(()=>{
                try{
                    let result = onRejected(this.value);
                    resolve(result);
                } catch(error){
                    reject(error);
                }
            });
        }
    });
}

案例代码测试：

<script src ="MyPromise.js"></script>
<script>
    let goodJob = new MyPromise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("前端收割机！！！！")
        	console.log("我要先执行!");
        })
    }).then(
        value =>{
            console.log(value);
            return value;
        },
        reason =>{
            console.log(reason);
        }
    ).then(
        value =>{
            console.log(value);
        },
        reason =>{
            console.log(reason);
        }
    )

	// 我要先执行!
	// 前端收割机！！！！
	// 前端收割机！！！！
</script>

四、返回类型

如果then返回的值为Promise，我们需要如何处理？所以我们需要判断分别处理返回值为Promise与普通值的情况。

  • 基本实现
then(onFulfilled,onRejected) {
    if(typeof onFulfilled != "function"){
        onFullfilled = value =>value;
    }
    if(typeof onRejected != "function"){
        onRejected = value => value;
    }
    return new MyPromise((resolve,reject) =>{
        if(this.status == MyPromise.PENDING){
            this.callbacks.push({
                onFUlfilled: value =>{
                    try{
                        let  result = onFulfilled(value);
                        if(result instanceof MyPromise){
                            result.then(resolve,reject);
                        }else{
                            resolve(result);
                        }
                    } catch(error){
                        reject(error);
                    }
                },
                onRejected: value =>{
                    try{
                        let result = onRejected(value);
                        if(result instanceof MyPromise){
                            result.then(resolve,reject);
                        }else{
                            resolve(result);
                        }
                    } catch(error){
                        reject(error);
                    }
                }
            });
        }
        if(this.status == MyPromise.FULFILLED){
            setTimeout(()=>{
                try{
                    let result = onFulfilled(this.value);
                    if(result instanceof MyPromise){
                         result.then(resolve,reject);
                    }else{
                         resolve(result);
                    }
                } catch(error){
                    reject(error);
                }
            });
        }
        if(this.status == MyPromise.REJECTED){
            setTime(()=>{
                try{
                    let result = onRejected(this.value);
                    if(result instanceof MyPromise){
                         result.then(resolve,reject);
                    }else{
                         resolve(result);
                    }
                } catch(error){
                    reject(error);
                }
            });
        }
    });
}
  • 代码复用

现在发现pendding、fulfilled、rejected 状态的代码非常相似，所以可以提取出方法Parse来复用

then(onFulfilled,onRejected) {
    if(typeof onFulfilled != "function"){
        onFullfilled = value =>value;
    }
    if(typeof onRejected != "function"){
        onRejected = value => value;
    }
    return 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);
            });
        }
    });
}
parse(result,resolve,reject){
    try{
        if(result instanceof MyPromise){
            result.then(resolve,reject);
        }else{
            resolve(result);
        }
    } catch(error){
        reject(error);
    }
}
  • 返回约束

then的返回的promise不能是then相同的Promise，下面是原生Promise的示例将产生错误

let promise = new Promise(resolve => {
  setTimeout(() => {
    resolve("前端收割机！！！！");
  });
});
promise = promise.then(value => {
  return promise;
});

//error : Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

解决上面的问题来完善代码，添加当前promise做为parse的第一个参数与函数结果比对

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);
    }
}

案例测试（现在进行测试也可以得到原生一样效果了）

<script src ="MyPromise.js"></script>
<script>
    let goodJob = new MyPromise(resolve => {
    	resolve("前端收割机！！！！");
	});
	goodJob = goodJob.then(value => {
  		return goodJob;
	});
	
	//error : Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>
</script>
innagine
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
MyPromise:手写 Promise
04-08
tip1 一个 Promise 的状态改变，比如说变成 rejected 不会影响其链式中的 then 返回的 Promise 的状态 例如下面的代码 success 是会成功打印的 const p = new Promise((resolve, reject) => { reject('fail') }) ....
js-Promise：手写系列手写promise，vue ..
02-21
const promises = [promise1, promise2, promise3]; Promise.all(promises) .then(values => { // 所有 Promise 成功后的处理 }) .catch(errors => { // 任意一个 Promise 失败后的处理 }); ``` ### 6. ...
js之手写promise
qq_42744920的博客
09-12 188
手写promise
js-手写promise
lovepink527的博客
06-10 281
手写promise以及promise的静态实例方法all、allsettled、any、resolve、reject以及promise实例方法catch、finally
js手写promise
yuanqi3131的博客
12-28 482
JS手写Promise Promise是异步编程的一种解决方案，简单的来说，Promise作为一个容器，保存着某个未来才会结束的事件的结果。 Promise有两个特点： 1）对象的状态不受外界影响。Promise有三种状态：pengding（进行中），fulfilled（完成），rejected（失败），只有异步操作的结果，可以决定当前是哪一个状态。 2）一旦状态改变，就不再改变。 class MyPromise { static PENDING = 'pending'; static F
js-手写Promise
qq_32644987的博客
06-12 985
1、Promise 创建MyPromise.js文件，在里面进行MyPromise逻辑处理 我们先看原生Promise的使用： new Promise((resolve,reject) => { }) 有代码可以看出：原生Promise通过new创建Promise对象，然后传入两个函数resolve、reject参数用于后续执行； 好的，那我们从这方面开始手写MyPromise。 首先，需要通过new创建对象，那就需要在内部实现构造函数 其次构造函数需要传入两个函数作为执行者 Pormi
js 手写 Promise
weixin_30701521的博客
04-28 141
/* * pending:初始化成功 * fulfilled:成功 * rejected：失败 * */ function Promise(cback){ this.status = 'pending'; this.value = undefined this.reason = undefined this.fulfille...
rewrite:手写的Promise调用apply等，JavaScript版数据结构与算法
03-30
本文将深入探讨“rewrite”项目中的手写Promise实现，以及如何使用apply和call方法，这些都是JavaScript版数据结构与算法的重要知识点。 首先，Promise的核心在于它的三种状态：pending（等待中）、fulfilled（已...
javascript-writings:JavaScript 手写题库
07-24
通过这个JavaScript手写题库，开发者不仅可以加深对JavaScript语言的理解，还能提高编程技巧，为实际项目开发打下坚实的基础。同时，题库的持续更新和维护也是为了适应JavaScript语言的不断发展和变化。
javascript手写简单的Promise
03-15
javascript手写简单的Promise
js 手写Promise
qq_44540152的博客
12-14 911
/* * 自定义Promise函数模块 */ (function (window){ /* * Promise构造函数 * excutor:执行器函数(同步执行) */ const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' function Promise_(excutor) { this.status =
JavaScript——手写Promise
weixin_40437521的博客
03-27 73
面试高频：JavaScript之手写Promise
JavaScript手写Promise
奋斗在路上
02-14 375
Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。 Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象 一个 Promise有...
js：手写一个promise
最新发布
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
04-10 519
如何实现一个promise？
用JS手写一个简单的Promise
zjw_python的博客
08-18 1450
参照Promise/A+规范手写了一个简化版的promise class MyPromise { constructor(fn) { if (typeof fn !== 'function') { throw new Error('参数必须为函数'); } this._state = 'Pending'; this._value = null; this._reason = null; this.fulfillCallbacks = [];
Promise解析
Andrew_Lii的博客
09-18 232
Promise 的含义 Promise 是异步编程的一种解决方案，比起传统的解决方案如：事件的监听和回调函数，要更加强大。ES6 将其写进了语言标准中，统一了用法，原生提供了Promise对象。所谓 Promise，简单来说就是一个装载着在未来才会开始和结束的事件的容器，Promise 有以下两个特点： Promise 的状态不受外界影响。Promise 中装载着一个在未来才会开始和结束的事件...
js手写实现Promise
风如白话的博客
02-09 602
练习Promise实现原理
js手写方法之--Promise
Lawliet_Hero的博客
12-31 225
js手写方法之–Promise Promise与async/await是ES6中常用的异步操作方法，为了深刻理解Promise的用法，解读源码是一个很好的方案。其核心方法是Promise构造函数，以及.then方法，其他静态方法都是在此基础之上封装的 为了方便理解，以下代码经过了适当删减 // Promise状态常量值 // 状态还未变化 const PENDING = 0 // 成功 const FULLFILLED = 1 // 失败 const REJECTED = 2 function MyProm
JS手写一个promise方法
IT913913的博客
04-12 410
手写一个promise是理解异步的一个基础
javascript手写一个promise.all
02-07
可以手写一个简单的 `promise.all` 函数，它接受一个 promise 对象数组作为参数，并返回一个新的 promise 对象： ``` function promiseAll(promises) { return new Promise((resolve, reject) => { // 存储所有 promise 返回值的数组 const values = [] // 已完成的 promise 计数器 let completed = 0 // 遍历 promise 数组 promises.forEach((promise, i) => { promise.then( value => { // 将 promise 返回值存储在数组中 values[i] = value // 增加已完成的 promise 计数器 completed++ // 如果所有 promise 都已完成，则解析最终的 promise if (completed === promises.length) { resolve(values) } }, error => { // 如果有任何一个 promise 失败，则将错误作为参数拒绝最终的 promise reject(error) } ) }) }) } ``` 使用方法： ``` promiseAll([promise1, promise2, promise3]).then(values => { // 所有 promise 都已完成，在此处使用返回值 console.log(values) }).catch(error => { // 任何一个 promise 失败，在此处处理错误 console.error(error) }) ``` 注意：这是一个简单版本的 `promise.all` 函数，它没有实现所有标准实现的功能，例如等待非 Promise 参数的转换，或者在参数中包含迭代器而不是数组的情况下的特殊处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值