又是学习的一天!简易版的Promise呈上来,冲冲冲!!!

  今天是星期六,写个笔记记下我的学习历程,自己有点小菜,把博客拿来当笔记写哈哈哈哈哈哈哈哈哈~~
  Promise是用来许下承诺的(可不会遭雷劈哦!),我承诺我会努力往上爬的,信不信咱们在未来瞧瞧好了^_-
  接收Promise状态改变有着年长的then方法,还有着async await修饰符(听说还有些浏览器不支持)。async await真的挺好的,阅读代码更加的舒服了。我来记录一下学习Promise时模拟封装的MyPromise构造函数… 简易的封装下啦~
先写下思路:

  1. 三个常量存储着三个状态:pending、resolved和rejected。
  2. 实例属性有着value(改变状态时接收的值)、status(当前状态)、resolvedCallBackList(存放状态变为resolve时触发的回调函数)、rejectedCallBackList(存放状态变为rejected时触发的回调函数)。
  3. 在构造函数中定义两个状态改变时触发的函数。
  4. 在MyPromise构造函数原型对象上定义一个then方法,接收成功与失败时的回调函数。当状态是pending时同步操作直接调用then方法里的两个回调函数;当状态时resolved/rejected时异步操作,将这两个回调函数放入到对应的数组中(第二步定义的),等掉状态改变再来拿出来执行。
    异步操作放入到数组中,运用的是闭包原理,我的异步操作没结束我的作用域就还在,嘻嘻嘻。贴代码咯 ~
const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";

function MyPromise(fn){
    const _this = this;     // 存一下this指向的MyPromise
    _this.value = null;     // 初始value值为空
    _this.status = PENDING; // 初始状态为pending
    _this.resolvedCallBackList = [];    // 存放then里面成功的回调函数
    _this.rejectedCallBackList = [];    // 存放then里面失败的回调函数

    // 定义两个成功/失败函数
    function resolve(value){
        console.log(value instanceof MyPromise);
        // 状态是pending才让你改变状态、value值执行成功的回调函数
        if(_this.status === PENDING){
            _this.value = value;
            _this.status = RESOLVED;
            _this.resolvedCallBackList.forEach(cb => cb(_this.value));
        }
    }
    function reject(value){
        // 也是一样的,状态只能是从pending -> resolved/rejected
        if(_this.status === PENDING){
            _this.value = value;
            _this.status = REJECTED;
            _this.rejectedCallBackList.forEach(cb => cb(_this.value));
        }
    }
    // 将传的函数调用,将resolve和reject两个函数作为实参传过去
    try{
        fn(resolve, reject);
    }catch(err){
        reject(err);
    }
}
MyPromise.prototype.then = function(onFulfilled, onRejected){
    const _this = this;
    // 判断是否传的是函数,不是函数就要创建一个函数并赋给对应的参数
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : item => item;
    onRejected = typeof onRejected === "function" ? onRejected : item => item;
    // 当是异步操作时,把成功与失败的函数都放在对应的数组里
    // 当是同步操作时,状态已经改变了,不用放入数组中,直接调用传的函数
    if(_this.status === PENDING){
        _this.resolvedCallBackList.push(onFulfilled);
        _this.rejectedCallBackList.push(onRejected);
    } else if(_this.status === RESOLVED) onFulfilled(_this.value);
    else if(_this.status === REJECTED) onRejected(_this.value);
}

const promise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve(11111);
    });
});
promise.then(value => {console.log(value);}, value => {console.log(value);});

最后说下不足之处:Promise的then方法返回值又是一个Promise实例,可以达到链式效果。我这个简易的封装不能有这个效果,思想有待提升。待我知识进步进化之日,再来加油改进!!!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值