devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：IT小白 | 2024-03-18 11:26:07

赞

踩

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

自定义Promise函数

  • 改变Promise的状态有 三种方式

    • resolve(),reject(),抛出异常
    • Promise的状态只能修改一次
    • Promise的then方法当中去执行回调
    • 异步任务 then 的 方法实现
    • 指定多个回调
    • 同步任务下then方法返回结果的实现
    • catch方法与异常穿透
    • Promise resolve方法封装
    • Promise reject方法封装
    • Promise all 方法封装
    • Promise race 方法封装
    • then指定的回调函数异步执行 
      1.  
      2. //声明构造函数
      3. function Promise(executor) {
      4. //给Promise对象添加属性
      5. this.PromiseState="pending";//默认值 pending
      6. this.PromiseResult=null;
      7. //声明属性来实现异步then的方法
      8. this.callbacks = [];
      9. //保存Promise实例对象 this 的值
      10. 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;

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

    }

    //声明失败时回调的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;

  1. //判断回调函数参数
  2. if(typeof onRejected !== "function"){
  3.     onRejected = reason=>{
  4.         throw reason;
  5.     }
  6. }   
  7. if(typeof onResolved !== "function"){
  8.     onResolved = value =>value;
  9.     // onResolved = value=>{
  10.     //     return value;
  11.     // }
  12. }   
  13. return new Promise((resolve,reject)=>{
  14.     //封装公用函数
  15.     function callback(type){
  16.          try {
  17.             //获取回调函数的执行结果
  18.             let result = type(self.PromiseResult);//传递结果值
  19.             //判断 是否Promise 的对象
  20.             if(result instanceof Promise){
  21.                 //如果是Promise类型的对象 可以调then 的方法
  22.                 result.then(v=>{
  23.                     resolve(v);
  24.                 },r=>{
  25.                     reject(r);
  26.                 })
  27.             }else{
  28.                 //结果的对象状态为成功
  29.                 resolve(result);
  30.             }
  31.         } catch (error) {
  32.             reject(error);
  33.         }
  34.     }
  35.  
  36.     //调用回调函数
  37.     //1.判断成功调用onResolved
  38.     if(this.PromiseState === "fulfilled"){
  39.         //then指定的回调函数异步执行
  40.         setTimeout(() => {
  41.             callback(onResolved);
  42.         });
  43.  
  44.     }
  45.     //2.判断失败调用onRejected
  46.     if(this.PromiseState === "rejected"){
  47.         //then指定的回调函数异步执行
  48.         setTimeout(()=>{
  49.             callback(onRejected);            
  50.         })
  51.  
  52.     }
  53.  
  54.     //Promise异步任务 then 的 方法实现
  55.     //1.判断 pengding的状态
  56.     if(this.PromiseState === 'pending'){
  57.         //状态不确定 保存回调函数
  58.         this.callbacks.push({
  59.             onResolved:function(){
  60.                 callback(onResolved);                   
  61.             },
  62.             onRejected:function(){
  63.                 callback(onRejected);                    
  64.             }
  65.         })
  66.     }
  67. })

}

//添加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{

  1. //构造方法
  2. constructor(executor){
  3.     //给Promise对象添加属性
  4.     this.PromiseState="pending";//默认值 pending
  5.     this.PromiseResult=null;
  6.     //声明属性来实现异步then的方法
  7.     this.callbacks = [];
  8.     //保存Promise实例对象 this 的值
  9.     const self = this;
  10.  
  11.     // 声明成功时回调的resolve函数
  12.     function resolve(data){
  13.         //判断Promise的状态是否已经被修改 ，被修改就不能再次修改了 保证Promise的状态只能修改一次
  14.         if(self.PromiseState !=='pending') return;
  15.         //1.修改Promise对象的状态(promiseState)
  16.         self.PromiseState = 'fulfilled';//成功：resolved、fulfilled
  17.         //2.设置Promise对象结果值(promiseResult)
  18.         self.PromiseState = data;
  19.  
  20.         //then指定的回调函数异步执行
  21.         setTimeout(() => {
  22.             // 调用成功的回调   来实现异步then的方法
  23.             self.callbacks.forEach(item => {
  24.                 item.onResolved(data);
  25.             });
  26.         })
  27.  
  28.     }
  29.  
  30.     //声明失败时回调的reject函数
  31.     function reject(data){
  32.         //判断Promise的状态是否已经被修改 ，被修改就不能再次修改了 保证Promise的状态只能修改一次
  33.         if(self.PromiseState !=='pending') return;
  34.         //1.修改Promise对象的状态(promiseState)
  35.         self.PromiseState = 'rejected';//失败：rejected
  36.         //2.设置Promise对象结果值(promiseResult)
  37.         self.PromiseState = data;
  38.         //then指定的回调函数异步执行
  39.         setTimeout(() => {
  40.             // 调用失败的回调   来实现异步then的方法
  41.             self.callbacks.forEach(item => {
  42.                 item.onRejected(data);
  43.             });
  44.         })
  45.  
  46.     }
  47.  
  48.     //抛出异常
  49.     try {
  50.         //同步调用【执行函数】
  51.         executor(resolve,reject);
  52.     } catch (error) {
  53.         //修改Promise对象的状态为【失败】
  54.         reject(error)
  55.     }
  56. }
  57.  
  58. //then 方法的封装
  59. then(onResolved,onRejected){
  60.     const self = this;
  61.  
  62.     //判断回调函数参数
  63.     if(typeof onRejected !== "function"){
  64.         onRejected = reason=>{
  65.             throw reason;
  66.         }
  67.     }   
  68.     if(typeof onResolved !== "function"){
  69.         onResolved = value =>value;
  70.         // onResolved = value=>{
  71.         //     return value;
  72.         // }
  73.     }   
  74.     return new Promise((resolve,reject)=>{
  75.         //封装公用函数
  76.         function callback(type){
  77.             try {
  78.                 //获取回调函数的执行结果
  79.                 let result = type(self.PromiseResult);//传递结果值
  80.                 //判断 是否Promise 的对象
  81.                 if(result instanceof Promise){
  82.                     //如果是Promise类型的对象 可以调then 的方法
  83.                     result.then(v=>{
  84.                         resolve(v);
  85.                     },r=>{
  86.                         reject(r);
  87.                     })
  88.                 }else{
  89.                     //结果的对象状态为成功
  90.                     resolve(result);
  91.                 }
  92.             } catch (error) {
  93.                 reject(error);
  94.             }
  95.         }
  96.  
  97.         //调用回调函数
  98.         //1.判断成功调用onResolved
  99.         if(this.PromiseState === "fulfilled"){
  100.             //then指定的回调函数异步执行
  101.             setTimeout(() => {
  102.                 callback(onResolved);
  103.             });
  104.  
  105.         }
  106.         //2.判断失败调用onRejected
  107.         if(this.PromiseState === "rejected"){
  108.             //then指定的回调函数异步执行
  109.             setTimeout(()=>{
  110.                 callback(onRejected);            
  111.             })
  112.  
  113.         }
  114.  
  115.         //Promise异步任务 then 的 方法实现
  116.         //1.判断 pengding的状态
  117.         if(this.PromiseState === 'pending'){
  118.             //状态不确定 保存回调函数
  119.             this.callbacks.push({
  120.                 onResolved:function(){
  121.                     callback(onResolved);                   
  122.                 },
  123.                 onRejected:function(){
  124.                     callback(onRejected);                    
  125.                 }
  126.             })
  127.         }
  128.     })
  129. }
  130.  
  131. //catch 方法封装
  132. catch(onRejected){
  133.     return this.then(undefined,onRejected);
  134. }
  135.  
  136. //添加 resolve 方法 属于类 不是属于实例对象 所以用 static 来修饰 表示静态成员
  137. static resolve(value){
  138.     //返回Promise 对象
  139.     return new Promise((resolve,reject)=>{
  140.         if(value instanceof Promise){
  141.             value.then(v=>{
  142.                 resolve(v);
  143.             },r=>{
  144.                 reject(r);
  145.             })
  146.         }else{
  147.             //状态设置为成功
  148.             resolve(value);
  149.         }
  150.     })
  151. }
  152.  
  153. //添加 Promise.reject 方法 属于类 不是属于实例对象
  154. static reject(reason){
  155.     //返回Promise 对象
  156.     return new Promise((resolve,reject)=>{
  157.         reject(reason);         
  158.     })
  159. }
  160. //添加 Promise.all方法的封装 属于类 不是属于实例对象
  161. static all(promise){
  162.     //返回的结果是一个Promise对象
  163.     return new Promise((resolve,reject)=>{
  164.         //声明计数变量
  165.         let count = 0;
  166.         //声明成功存发的数据
  167.         let successResultArr = [];
  168.         for(let i=0;i<promise.length;i++){
  169.             promise[i].then(v={
  170.                 //得知这个对象的状态时成功的
  171.                 //每个promise对象成功才能调
  172.                 count++;
  173.                 //将当前成功的结果存入到数组中
  174.                 successResultArr[i] = v;
  175.                 if(count === promise.length){
  176.                     resolve(successResultArr);
  177.                 }
  178.             },r=>{
  179.                 reject(r);
  180.             })
  181.         }
  182.     })
  183. }
  184.  
  185. //添加 reject方法封装 属于类 不是属于实例对象
  186. static race(promise){
  187.     return new Promise((resolve,reject)=>{        
  188.         for(let i=0;i<promise.length;i++){
  189.             promise[i].then(v={
  190.                 //修改返回对象的状态为【成功】
  191.                 resolve(v)
  192.             },r=>{
  193.                 //修改返回对象的状态为【失败】
  194.                 reject(r);
  195.             })
  196.         }
  197.     })
  198. }

}

  1.  
  2. ## async 函数
  3. -   函数的返回值 为 Promise 对象
  4. -   promise 对象的结果有async 函数执行的返回决定
  5. ```javascript
  6.     async function mian(){
  7.  
  8.     }

await 表达式

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

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

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

    1.  
    2. async ffunction main(){
    3. let p = new Promise((resolve,reject)=>{
    4.     //resolve('OK');
    5.     reject('error');
    6. })
    7. //1.右侧为promise的情况
    8. // let p res = await p;// 返回结果为OK
    9. //2. 右侧为其他类型的数据
    10. // let res2 = await 20;//返回结果值为20
    11. // 3.如果promise 是失败的状态
    12. try {
    13.     let res3 = await p;
    14. } catch (error) {
    15.     console.log(error);
    16. }
    17. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/262688
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号