自定义封装实现Promise

最新推荐文章于 2023-06-09 17:54:41 发布
最新推荐文章于 2023-06-09 17:54:41 发布
阅读量180 收藏
点赞数
分类专栏： js日记 文章标签： javascript
原文链接：https://www.bilibili.com/video/BV1GA411x7z1
版权

自定义封装实现Promise

//原promise对比
// let p = new Promise((resolve, reject) => {
        //     var ids = setTimeout(()=>{
        //         resolve("success");
        // reject("false");
        // },1000)
        // clearTimeout(ids);
        // reject("false");
        // throw("ERROR")
        // })
        // console.log(p);
        // let x = new Promise(() => {});
        // console.log(x);

        // let result = p.then(value => {
        //     console.log(value);
        // throw("ERROR2")
        // }, reason => {
        // console.log(reason);
        // return new Promise((resolve, reject) => {
        //     throw("ERROR2")
        // })
        // }).then(value => {
        //     console.log(value,"xxx");
        // }, reason => {
        //     console.log(reason,"yyy");
        // return new Promise((resolve, reject) => {
        //     throw("ERROR1")
        // })
        // })

        // p.then(value => {
        //     alert(value)
        // }, reason => {
        //     console.log(reason);
        // })
        // console.log(result,"sasas");
        // console.log(p);

        let p = new Promise((resolve, reject) => {
            var ids = setTimeout(() => {
                // resolve("success");
                // throw "false"
                reject("false")
            }, 1000)
        })
        p.then(() => {
            console.log(111);
        }).then(() => {
            console.log(222);
        }).then(() => {
            console.log(333);
        }).catch((error) => {
            console.log(error);
        })

let x = Promise.resolve("aaa")
        console.log(x);
let y = Promise.resolve(new Promise((resolve, reject) => {reject("false")}))
        console.log(y);

//Promise.js

function Promise(executer){
    this["[[PromiseState]]"] = "pending";
    this.callback = {};
    let self = this;
    function resolve(data){
        if(self["[[PromiseState]]"] !== "pending") return;
        self["[[PromiseState]]"] = "resolved";
        self["[[PromiseResult]]"] = data;
        //if(self.callback.onResolved) self.callback.onResolved(data);
        //self.callbacks.forEach(item => item.onResolved(data));
        setTimeout(()=>{
            self.callbacks.forEach(item => item.onResolved(data));
        })
    }

    function reject(data){
        if(self["[[PromiseState]]"] !== "pending") return;
        self["[[PromiseState]]"] = "rejected";
        self["[[PromiseResult]]"] = data;
        //if(self.callback.onResolved) self.callback.onRejected(data);
       //self.callbacks.forEach(item => item.onRejected(data));
        setTimeout(()=>{
            self.callbacks.forEach(item => item.onRejected(data));
        })
    }

    try {
        executer(resolve,reject);
    } catch (error) {
        reject(error);
    }
}

Promise.prototype.then = function(onResolved,onRejected){
    /*
    this["[[PromiseState]]"] === "resolved" ? onResolved(this["[[PromiseResult]]"]) : this["[[PromiseState]]"] === "rejected" ? onRejected(this["[[PromiseResult]]"]) : this.callback = {onResolved,onRejected};
    */
    /*
    this["[[PromiseState]]"] === "resolved" ? onResolved(this["[[PromiseResult]]"]) : this["[[PromiseState]]"] === "rejected" ? onRejected(this["[[PromiseResult]]"]) : this.callbacks.push({onResolved,onRejected});
    */
    /*
    return new Promise((resolve,reject) => {
        let result = this["[[PromiseState]]"] === "resolved" ? onResolved(this["[[PromiseResult]]"]) : this["[[PromiseState]]"] === "rejected" ? onRejected(this["[[PromiseResult]]"]) : this.callbacks.push({onResolved,onRejected});
        result instanceof Promise ? result.then(v => resolve(v),r => reject(r)) : resolve(result);
    })
    */
    /*
    return new Promise((resolve,reject) => {
       try {
            let result = this["[[PromiseState]]"] === "resolved" ? onResolved(this["[[PromiseResult]]"]) : this["[[PromiseState]]"] === "rejected" ? onRejected(this["[[PromiseResult]]"]) : this.callbacks.push({onResolved,onRejected});
            result instanceof Promise ? result.then(v => resolve(v),r => reject(r)) : resolve(result);
       } catch (error) {
           reject(error);
       }
    })
    */
    /*
     return new Promise((resolve,reject) => {
       if(this["[[PromiseState]]"] === "resolved"){
            try {
                let result = onResolved(this["[[PromiseResult]]"]);
                if(result instanceof Promise){
                    result.then(v => resolve(v),r => reject(r))
                }else{
                    resolve(result)
                }
            } catch (error) {
                reject(error); 
            }
       }
       if(this["[[PromiseState]]"] === "rejected"){
        onRejected(this["[[PromiseResult]]"])
       }
       if(this["[[PromiseState]]"] === "pending"){
        this.callbacks.push({onResolved,onRejected})
       } 
    })
    */
    /*
    return new Promise((resolve,reject) => {
    	let self = this;
       	if(self["[[PromiseState]]"] === "resolved"){
            try {
                let result = onResolved(self["[[PromiseResult]]"]);
                if(result instanceof Promise){
                    result.then(v => resolve(v),r => reject(r))
                }else{
                    resolve(result)
                }
            } catch (error) {
                reject(error); 
            }
       }
       if(self["[[PromiseState]]"] === "rejected"){
         try {
                let result = onRejected(self["[[PromiseResult]]"]);
                if(result instanceof Promise){
                    result.then(v => resolve(v),r => reject(r))
                }else{
                    resolve(result)
                }
            } catch (error) {
                reject(error); 
            }
       }
       if(self["[[PromiseState]]"] === "pending"){
        self.callbacks.push({onResolved:function(){
            try {
                let result = onResolved(self["[[PromiseResult]]"]);
                if(result instanceof Promise){
                    result.then(v => resolve(v),r => reject(r))
                }else{
                    resolve(result)
                }
            } catch (error) {
                reject(error); 
            }
        },onRejected:function(){
            try {
                let result = onRejected(self["[[PromiseResult]]"]);
                if(result instanceof Promise){
                    result.then(v => resolve(v),r => reject(r))
                }else{
                    resolve(result)
                }
            } catch (error) {
                reject(error); 
            }
        }})
       } 
    })
    */
    return new Promise((resolve,reject) => {
       let self = this;
        if(typeof onResolved !== "function"){
            onResolved = value => value;
        }
    	if(typeof onRejected !== "function"){
            onRejected = reason => {
                throw reason;
            }
        }
       function callback(excute){
        try {
            let result = excute(self["[[PromiseResult]]"]);
            if(result instanceof Promise){
                result.then(v => resolve(v),r => reject(r))
            }else{
                resolve(result)
            }
        } catch (error) {
            reject(error); 
        }
       }
       if(this["[[PromiseState]]"] === "resolved"){
            //callback(onResolved)
           setTimeout(()=>{
               callback(onResolved)
            })
       }
       if(this["[[PromiseState]]"] === "rejected"){
            //callback(onRejected)
           setTimeout(()=>{
                callback(onRejected)
            })
       }
       if(this["[[PromiseState]]"] === "pending"){
        this.callbacks.push({onResolved:function(){
            callback(onResolved)
        },onRejected:function(){
            callback(onRejected)
        }})
       } 
    })
}

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

Promise.resolve = function(value){
    return new Promise((resolve,reject) => {
        value instanceof Promise ? value.then(v => resolve(v),r => reject(r)) : resolve(value);
    })
}

Promise.reject = function(reason){
    return new Promise((resolve,reject) => {
        reject(reason);
    })
}

Promise.all = function(promises){
    return new Promise((resolve,reject) => {
        let resarr = [];
        let count = 0;
        promises.forEach((item,index) => {
            item.then(v => {
                count++;
                resarr[index] = v;
                if(count === promises.length) resolve(resarr);
            },r => {
                reject(r);
            })
        })
    })
}

Promise.race = function(promises){
    return new Promise((resolve,reject) => {
        promises.forEach(item => {
            item.then(v => {
               resolve(v);
            },r => {
                reject(r);
            })
        })
    })
}

拆分解析

//executer	执行函数参数，传入Promise对象的是一个回调函数
//resolve和reject	executer()函数的参数是两个函数参数

//Promise.prototype.then	实例化Promise对象后仍旧可以调用then属性指向函数代表then属性是原型链上原型对象属性

//self = this	储存this指向，防止丢失
//self.PromiseState	Promise对象的状态改变
//self["[[PromiseResult]]"] = data	返回结果为传入参数

//if(self["[[PromiseState]]"] !== "pending") return		Promise对象状态只能改变一次

//try catch		Promise状态改变的三种方式:resolve、reject、throw，后两者返回状态皆为rejected

//三目运算符调用：三种状态的处理
//this.callback = {onResolved,onRejected}	处理异步，存在异步时，将then的参数储存在对象上，在状态改变时进行调用
//his.callback => his.callbacks	//考虑到多次调用Promise.then也可执行，若callback为对象，则多次调用会产生覆盖而只执行最后一个then

//return new Promise()	Promise对象then方法执行后返回一个Promise对象
//声明result变量	then方法返回的值若不是Promise对象，则作为值传入resolve执行，是Promise对象则执行then方法且状态与上一个返回的Promise对象状态相同

//放弃三目运算符的原因：存在bug，异步执行Promise对象状态为挂起时，变量result接收undefined，继续向后执行，与预期效果相悖，先换回if else，后期优化再做考虑

//4个try cache	暂未考虑代码冗余问题，此处处理Promise对象异步执行结束后状态未按照原Promise改变仍旧为pending的问题

//function callback	函数封装解决代码冗余

//typeof...		Promise.then可以值传递

//Promise.prototype.catch	捕获异常且可以异常穿透

//Promise.resolve	实例化对象不具有的resolve属性，快速创建Promise对象

//Promise.reject	实例化对象不具有的reject属性，快速创建Promise对象

//Promise.all	数组中元素状态全为resolve时，状态为resolved，返回结果为数组元素返回结果组成的数组，否则状态为rejected。返回结果为第一个状态改变为rejected的数组元素

//Promise.race	数组中第一个元素的状态和返回结果决定了该方法的状态与返回结果

//setTimeout(()=>{})	then方法为异步调用

封装为类

class Promise{
    constructor(executer){
        this["[[PromiseState]]"] = "pending";
        this.callbacks = [];
        let self = this;
        function resolve(data){
            if(self["[[PromiseState]]"] !== "pending") return;
            self["[[PromiseState]]"] = "resolved";
            self["[[PromiseResult]]"] = data;
            setTimeout(()=>{
                self.callbacks.forEach(item => item.onResolved(data));
            })
        }
    
        function reject(data){
            if(self["[[PromiseState]]"] !== "pending") return;
            self["[[PromiseState]]"] = "rejected";
            self["[[PromiseResult]]"] = data;
            setTimeout(()=>{
                self.callbacks.forEach(item => item.onRejected(data));
            })
        }
    
        try {
            executer(resolve,reject);
        } catch (error) {
            reject(error);
        }
    }

    then(onResolved,onRejected){
        let self = this;
        if(typeof onResolved !== "function"){
            onResolved = value => value;
        }
        if(typeof onRejected !== "function"){
            onRejected = reason => {
                throw reason;
            }
        }
        return new Promise((resolve,reject) => {
           function callback(excute){
            try {
                let result = excute(self["[[PromiseResult]]"]);
                if(result instanceof Promise){
                    result.then(v => resolve(v),r => reject(r))
                }else{
                    resolve(result)
                }
            } catch (error) {
                reject(error); 
            }
           }
           if(this["[[PromiseState]]"] === "resolved"){
               setTimeout(()=>{
                   callback(onResolved)
                })
           }
           if(this["[[PromiseState]]"] === "rejected"){
                setTimeout(()=>{
                    callback(onRejected)
                })
           }
           if(this["[[PromiseState]]"] === "pending"){
            this.callbacks.push({onResolved:function(){
                callback(onResolved)
            },onRejected:function(){
                callback(onRejected)
            }})
           } 
        })
    }
    
    catch(onRejected){
        return this.then(undefined,onRejected);
    }
    
    static resolve(value){
        return new Promise((resolve,reject) => {
            value instanceof Promise ? value.then(v => resolve(v),r => reject(r)) : resolve(value);
        })
    }
    
    static reject(reason){
        return new Promise((resolve,reject) => {
            reject(reason);
        })
    }
    
    static all(promises){
        return new Promise((resolve,reject) => {
            let resarr = [];
            let count = 0;
            promises.forEach((item,index) => {
                item.then(v => {
                    count++;
                    resarr[index] = v;
                    if(count === promises.length) resolve(resarr);
                },r => {
                    reject(r);
                })
            })
        })
    }
    
    static race(promises){
        return new Promise((resolve,reject) => {
            promises.forEach(item => {
                item.then(v => {
                   resolve(v);
                },r => {
                    reject(r);
                })
            })
        })
    }
    
}
菜鸟小胖砸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
promise.js自定义封装，包含构造函数以及class封装
01-10
想了解promise封装的人
微信小程序（自定义组件，模板，网络请求promise封装）
05-23
该微信小程序包括自定义组件，模板设计，网络请求promise的封装。
Promise.all() 使用及封装
qq_44130459的博客
09-29 727
Promise.all() 用于多个异步函数全部执行完成，再进行下一步操作的场景；场景举例：页面默认查询且要默认传两个参数（这两个参数是从接口里取到的）
手写Promise（原生Promise剖析三 - - all方法封装）
weixin_46886227的博客
01-06 1244
前言：上篇文章中，我们以及构建出了基本的then()方法，并且处理掉了一些关键性问题，如链式调用怎么二次封装，链式调用then()方法返回值如何，并且完整的列举出了三种情况，分别是：非Promise，Promise（成功Promise、失败Promise）、抛出异常 , 时的返回值情况。最后我们留下了一个问题，就是有关这次文章的主题，那就是all()方法中，一次传入多个Promise组成的数组，最终结果如何，我们又该如何完美的封装它? 首先，我们就需要了解官方的Promise.all()方法是怎么运作的，
Promise 封装请求，Promise.all 使用
摸鱼小队
06-21 992
Promise 封装请求，Promise.all 使用
封装一个promise.all
weixin_42591908的博客
01-13 73
Promise.all是JavaScript中的一个方法，用于将多个Promise对象封装成一个新的Promise对象。它接受一个Promise对象数组作为参数，返回一个新的Promise对象。当所有Promise对象都成功时，新的Promise对象也会成功，并返回所有Promise对象的返回值组成的数组。如果有任意一个Promise对象失败，新的Promise对象也会失败，并返回第一个失败的Pr...
Promise.all获取forEach循环请求数据
IT侠客行的博客
04-16 1万+
Promise.all() 方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入，并且只返回一个Promise实例，那个输入的所有promise的resolve回调的结果是一个数组。这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promise了的时候。它的reject回调执行是，只要任何一个输入的promise的reject回调执行或者输入不合法...
vue中axios请求的封装实例代码
12-03
封装axios，一方面为了以后维护方便，另一方面也可以对请求进行自定义处理 安装 npm i axios 封装 我把axios请求封装在http.js中，重新把get请求，post请求封装了一次 首先，引入axios import axios from '...
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
全局直接使用js调用 this.$confirmation() 调用通用提示弹窗可二次封装 点击确认取消后 会有相应的回调 利用的Promise封装的
jXhr：基于Promise的异步XMLHttpRequest（XHR）包装库
03-04
hr 一个基于Promise的异步XMLHttpRequest（XHR）包装器/库。仍在开发中，请稍后再回来...。 用TypeScript编写（TS模块） 没有依赖关系很小的文件大小（目前只有2kb） 已捆绑并可以作为bundle.min.js使用， bundle....
手写promise原理系列八：封装Promise.all方法，Promise.all的用法
ThisEqualThis的博客
03-14 519
Promise.all 方法的参数是一个 promise 对象组成的数组，当 Promise.all 方法的参数中有一个失败的状态时，直接返回当前失败的 promise 对象的状态以及结果。由上面的同步、异步调用方式可知，不管 promise 对象是同步改变状态还是异步改变状态，Promise.all 的执行结果都是。其实，关键点在于异步改变状态时，如何让 Promise.all 的执行结果变为有序的？的意思，其实就是全部 promise 对象执行成功才返回结果，只要有一个失败，就返回失败的结果。
Promise.all简单封装
weixin_40629549的博客
02-22 799
promise.all 本质上也是一个promise 通过then方法获取值 function myPromiseall(...arguments) { return new Promise((reslove,reject) => { let arr = [], // resolove返回值 err = true, // Promise 状态 ...
Promise.all中的错误处理(转于慕课)
陈景夏
07-19 1753
当我们想“并发执行”若干个任务的时候，我们很容易就想到了Promise.all。但是Promise.all有一个缺陷：当有一个任务失败的时候，就会直接进入catch的逻辑了。这个可能并不是我们想要的结果。想象一下我们同时发出了3个网络请求，其中2个正常返回了，有一个reject了，结果却都挂了，只能被迫进入错误处理的逻辑。我们的需求是：出错的那一个请求不会影响到正常的请求。这种情况应该怎么处理呢？ 使用await，增加try…catch…逻辑 要解决上面的问题，思路很简单，只需要再外面再包一层Promise
promise中catch的用法
笔记
02-22 1万+
前言 在最近的项目中，用到了es6的promise语法，发现promise.prototype.catch 并不只是单单reject抛出的回调函数，所以今天做一些笔录，防止以后在项目中又碰到这样的问题。 先介绍一下promise.prototype.catch Promise.prototype.catch 方法是 .then(null, rejection) 或是 .then(undefined, rejection)的别名，用于指定发生错误时的回调函数。 如果Promise 对象状态变为reso
promise.all的用法（简洁易懂）
热门推荐
weixin_62765236的博客
09-23 5万+
promise.all的用法（简洁易懂）
前端 面试----手写promise（promise自定义封装）
WXY博客
06-09 852
---------简单来说，函数是为了解决异步回调时的一些问题，更准确来说是为了解决我们在开发中，经常会面临的“回调地狱”所给开发者带来的困扰。promise可以被理解成一个方案，来有助于我们快速规避这些麻烦，从而提高我们的开发效率。----------我们知道一个Promise函数的状态必然处于以下几种状态中的一个：待定（pending）已兑现（fulfilled）已拒绝（rejected）
试图封装一个Promise.all方法
MyGodAdmin的博客
11-27 423
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Promise</title> </head> <body> <script type="text/javascript"> /** * new Promise 接收一个function作为参数， * function中有两个回调函数作为参数
手写promise原理系列五：Promise.prototype.catch方法的封装与异常穿透，promise.catch的用法
ThisEqualThis的博客
03-13 384
在上面代码中的第一个 then 方法中没有传递回调函数，这时候咱们封装的 then 方法肯定报错，程序无法执行，因为不传参数，相当于传递两个 undefined 值，undefined 值无法进行函数调用，因为 then 方法内部默认是传递函数作为参数的。catch 方法接受一个参数，就是失败时的回调，而 then 方法接受两个参数，第二个参数为失败时的回调，那可不可以只使用 then 方法的第二个参数呢？下图为上面代码的图示理解，我尽力了。
promiseall封装
最新发布
09-08
在引用中的代码例子中，myPromiseall是一个自定义的Promise.all函数实现。它接收一个可变数量的Promise对象作为参数，并返回一个新的Promise对象。在内部，通过遍历参数数组，对每一个Promise对象调用Promise....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值