如何自定义Promise函数与详细讲解

最新推荐文章于 2024-07-13 11:10:44 发布

摸鱼小号

最新推荐文章于 2024-07-13 11:10:44 发布

阅读量431

点赞数

文章标签： javascript 前端 java

原文链接：https://www.cnxym.cn/5451.html

版权

自定义Promise函数

改变Promise的状态有三种方式
- resolve(),reject(),抛出异常
- Promise的状态只能修改一次
- Promise的then方法当中去执行回调
- 异步任务 then 的方法实现
- 指定多个回调
- 同步任务下then方法返回结果的实现
- catch方法与异常穿透
- Promise resolve方法封装
- Promise reject方法封装
- Promise all 方法封装
- Promise race 方法封装
- then指定的回调函数异步执行
```
//声明构造函数
function Promise(executor) {
//给Promise对象添加属性
this.PromiseState="pending";//默认值 pending
this.PromiseResult=null;
//声明属性来实现异步then的方法
this.callbacks = [];
//保存Promise实例对象 this 的值
const self = this;
```
// 声明成功时回调的resolve函数
function resolve(data){
//判断Promise的状态是否已经被修改，被修改就不能再次修改了保证Promise的状态只能修改一次
if(self.PromiseState !=='pending') return;
//1.修改Promise对象的状态(promiseState)
self.PromiseState = 'fulfilled';//成功：resolved、fulfilled
//2.设置Promise对象结果值(promiseResult)
self.PromiseState = data;
```
//then指定的回调函数异步执行
setTimeout(() => {
    // 调用成功的回调   来实现异步then的方法
    self.callbacks.forEach(item => {
        item.onResolved(data);
    });
})
```
}

//声明失败时回调的reject函数
function reject(data){
//判断Promise的状态是否已经被修改，被修改就不能再次修改了保证Promise的状态只能修改一次
if(self.PromiseState !=='pending') return;
//1.修改Promise对象的状态(promiseState)
self.PromiseState = 'rejected';//失败：rejected
//2.设置Promise对象结果值(promiseResult)
self.PromiseState = data;
//then指定的回调函数异步执行
setTimeout(() => {
// 调用失败的回调来实现异步then的方法
self.callbacks.forEach(item => {
item.onRejected(data);
});
})

}

//抛出异常
try {
//同步调用【执行函数】
executor(resolve,reject);
} catch (error) {
//修改Promise对象的状态为【失败】
reject(error)
}

}

//添加函数Promise的 then 方法
Promise.prototype.then =function(onResolved,onRejected){
const self = this;

//判断回调函数参数
if(typeof onRejected !== "function"){
    onRejected = reason=>{
        throw reason;
    }
}   
if(typeof onResolved !== "function"){
    onResolved = value =>value;
    // onResolved = value=>{
    //     return value;
    // }
}   
return new Promise((resolve,reject)=>{
    //封装公用函数
    function callback(type){
         try {
            //获取回调函数的执行结果
            let result = type(self.PromiseResult);//传递结果值
            //判断 是否Promise 的对象
            if(result instanceof Promise){
                //如果是Promise类型的对象 可以调then 的方法
                result.then(v=>{
                    resolve(v);
                },r=>{
                    reject(r);
                })
            }else{
                //结果的对象状态为成功
                resolve(result);
            }
        } catch (error) {
            reject(error);
        }
    }

    //调用回调函数
    //1.判断成功调用onResolved
    if(this.PromiseState === "fulfilled"){
        //then指定的回调函数异步执行
        setTimeout(() => {
            callback(onResolved);
        });

    }
    //2.判断失败调用onRejected
    if(this.PromiseState === "rejected"){
        //then指定的回调函数异步执行
        setTimeout(()=>{
            callback(onRejected);            
        })

    }

    //Promise异步任务 then 的 方法实现
    //1.判断 pengding的状态
    if(this.PromiseState === 'pending'){
        //状态不确定 保存回调函数
        this.callbacks.push({
            onResolved:function(){
                callback(onResolved);                   
            },
            onRejected:function(){
                callback(onRejected);                    
            }
        })
    }
})

}

//添加catch 方法
Promise.prototype.catch = function(onRejected){
return this.then(undefined,onRejected);
}

//添加 resolve 方法属于类不是属于实例对象
Promise.resolve = function(value){
//返回Promise 对象
return new Promise((resolve,reject)=>{
if(value instanceof Promise){
value.then(v=>{
resolve(v);
},r=>{
reject(r);
})
}else{
//状态设置为成功
resolve(value);
}
})
}

//添加 Promise.reject 方法属于类不是属于实例对象
Promise.reject = function(reason){
//返回Promise 对象
return new Promise((resolve,reject)=>{
reject(reason);
})
}
//添加 Promise.all方法的封装属于类不是属于实例对象
Promise.all = function(promise){
//返回的结果是一个Promise对象
return new Promise((resolve,reject)=>{
//声明计数变量
let count = 0;
//声明成功存发的数据
let successResultArr = [];
for(let i=0;i<promise.length;i++){
promise[i].then(v={
//得知这个对象的状态时成功的
//每个promise对象成功才能调
count++;
//将当前成功的结果存入到数组中
successResultArr[i] = v;
if(count === promise.length){
resolve(successResultArr);
}
},r=>{
reject(r);
})
}
})
}

//添加 reject方法封装属于类不是属于实例对象
Promise.race = function(promise){
return new Promise((resolve,reject)=>{
for(let i=0;i<promise.length;i++){
promise[i].then(v={
//修改返回对象的状态为【成功】
resolve(v)
},r=>{
//修改返回对象的状态为【失败】
reject(r);
})
}
})
}

//给Promise 封装成一个类
class Promise{

//构造方法
constructor(executor){
    //给Promise对象添加属性
    this.PromiseState="pending";//默认值 pending
    this.PromiseResult=null;
    //声明属性来实现异步then的方法
    this.callbacks = [];
    //保存Promise实例对象 this 的值
    const self = this;

    // 声明成功时回调的resolve函数
    function resolve(data){
        //判断Promise的状态是否已经被修改 ，被修改就不能再次修改了 保证Promise的状态只能修改一次
        if(self.PromiseState !=='pending') return;
        //1.修改Promise对象的状态(promiseState)
        self.PromiseState = 'fulfilled';//成功：resolved、fulfilled
        //2.设置Promise对象结果值(promiseResult)
        self.PromiseState = data;

        //then指定的回调函数异步执行
        setTimeout(() => {
            // 调用成功的回调   来实现异步then的方法
            self.callbacks.forEach(item => {
                item.onResolved(data);
            });
        })

    }

    //声明失败时回调的reject函数
    function reject(data){
        //判断Promise的状态是否已经被修改 ，被修改就不能再次修改了 保证Promise的状态只能修改一次
        if(self.PromiseState !=='pending') return;
        //1.修改Promise对象的状态(promiseState)
        self.PromiseState = 'rejected';//失败：rejected
        //2.设置Promise对象结果值(promiseResult)
        self.PromiseState = data;
        //then指定的回调函数异步执行
        setTimeout(() => {
            // 调用失败的回调   来实现异步then的方法
            self.callbacks.forEach(item => {
                item.onRejected(data);
            });
        })

    }

    //抛出异常
    try {
        //同步调用【执行函数】
        executor(resolve,reject);
    } catch (error) {
        //修改Promise对象的状态为【失败】
        reject(error)
    }
}

//then 方法的封装
then(onResolved,onRejected){
    const self = this;

    //判断回调函数参数
    if(typeof onRejected !== "function"){
        onRejected = reason=>{
            throw reason;
        }
    }   
    if(typeof onResolved !== "function"){
        onResolved = value =>value;
        // onResolved = value=>{
        //     return value;
        // }
    }   
    return new Promise((resolve,reject)=>{
        //封装公用函数
        function callback(type){
            try {
                //获取回调函数的执行结果
                let result = type(self.PromiseResult);//传递结果值
                //判断 是否Promise 的对象
                if(result instanceof Promise){
                    //如果是Promise类型的对象 可以调then 的方法
                    result.then(v=>{
                        resolve(v);
                    },r=>{
                        reject(r);
                    })
                }else{
                    //结果的对象状态为成功
                    resolve(result);
                }
            } catch (error) {
                reject(error);
            }
        }

        //调用回调函数
        //1.判断成功调用onResolved
        if(this.PromiseState === "fulfilled"){
            //then指定的回调函数异步执行
            setTimeout(() => {
                callback(onResolved);
            });

        }
        //2.判断失败调用onRejected
        if(this.PromiseState === "rejected"){
            //then指定的回调函数异步执行
            setTimeout(()=>{
                callback(onRejected);            
            })

        }

        //Promise异步任务 then 的 方法实现
        //1.判断 pengding的状态
        if(this.PromiseState === 'pending'){
            //状态不确定 保存回调函数
            this.callbacks.push({
                onResolved:function(){
                    callback(onResolved);                   
                },
                onRejected:function(){
                    callback(onRejected);                    
                }
            })
        }
    })
}

//catch 方法封装
catch(onRejected){
    return this.then(undefined,onRejected);
}

//添加 resolve 方法 属于类 不是属于实例对象 所以用 static 来修饰 表示静态成员
static resolve(value){
    //返回Promise 对象
    return new Promise((resolve,reject)=>{
        if(value instanceof Promise){
            value.then(v=>{
                resolve(v);
            },r=>{
                reject(r);
            })
        }else{
            //状态设置为成功
            resolve(value);
        }
    })
}

//添加 Promise.reject 方法 属于类 不是属于实例对象
static reject(reason){
    //返回Promise 对象
    return new Promise((resolve,reject)=>{
        reject(reason);         
    })
}
//添加 Promise.all方法的封装 属于类 不是属于实例对象
static all(promise){
    //返回的结果是一个Promise对象
    return new Promise((resolve,reject)=>{
        //声明计数变量
        let count = 0;
        //声明成功存发的数据
        let successResultArr = [];
        for(let i=0;i<promise.length;i++){
            promise[i].then(v={
                //得知这个对象的状态时成功的
                //每个promise对象成功才能调
                count++;
                //将当前成功的结果存入到数组中
                successResultArr[i] = v;
                if(count === promise.length){
                    resolve(successResultArr);
                }
            },r=>{
                reject(r);
            })
        }
    })
}

//添加 reject方法封装 属于类 不是属于实例对象
static race(promise){
    return new Promise((resolve,reject)=>{        
        for(let i=0;i<promise.length;i++){
            promise[i].then(v={
                //修改返回对象的状态为【成功】
                resolve(v)
            },r=>{
                //修改返回对象的状态为【失败】
                reject(r);
            })
        }
    })
}

}


## async 函数
-   函数的返回值 为 Promise 对象
-   promise 对象的结果有async 函数执行的返回决定
```javascript
    async function mian(){

    }

await 表达式

await 右侧的表达式一般为promise对象，但是也可以时其它的值
如果表达式是promise对象，await 返回的是promise成功的值

如果表达式时其他的值，直接将此值作为await的的返回值

注意：await 必须写在async 函数中，但 async函数中可以没有await
如果await 的promise 失败了，就会抛出异常，需要通过try...catch捕获处理


async ffunction main(){
let p = new Promise((resolve,reject)=>{
    //resolve('OK');
    reject('error');
})
//1.右侧为promise的情况
// let p res = await p;// 返回结果为OK
//2. 右侧为其他类型的数据
// let res2 = await 20;//返回结果值为20
// 3.如果promise 是失败的状态
try {
    let res3 = await p;
} catch (error) {
    console.log(error);
}
}

摸鱼小号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
如何自定义Promise函数与详细讲解

改变Promise的状态有三种方式// 声明成功时回调的resolve函数//判断Promise的状态是否已经被修改，被修改就不能再次修改了保证Promise的状态只能修改一次//1.修改Promise对象的状态(promiseState)//成功：resolved、fulfilled//2.设置Promise对象结果值(promiseResult)//声明失败时回调的reject函数。
复制链接

扫一扫