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

promise的实现与原理_promise inject

作者：笔触狂放9 | 2024-07-04 11:47:12

赞

踩

promise inject

实现Promise

    Promise标准仅描述了then方法的行为，未对catch、all、race方法进行描述，也未规范如何创建一个Promise对象。ES6中Promise提供了以下API。

(1) 构造函数

function Promise(resolver) {}

(2) 原型方法

  1. Promise.prototype.then = function() {}
  2. Promise.prototype.catch = function() {}

(3) 静态方法 

  1. Promise.resolve = function() {}
  2. Promise.reject = function() {}
  3. Promise.all = function() {}
  4. Promise.race = function() {}

 构造函数

1:  Promise/A+标准并没有指定如何构造一个Promise对象，我们以ES6原生Promise模块里通过构造函数创建Promise对象的方式实现Promise构造函数。ES6中通过构造函数创建Promise对象的简单用法如下：

  1. const promise = new Promise((resolve) => {
  2.     setTimeout(()=> {
  3.         resolve(1);
  4.     }, 2000);
  5. });
  6. promise.then(a=> alert(a));
  7. promise.then(a => alert(a+1));

构造函数用法总结：
(1) 构造函数接收一个executor立即执行函数
(2) executor立即执行函数接收一个resolve函数
(3) promise对象的then方法绑定状态变为fulfilled时的回调
(4) resolve函数被调用时会触发then方法中的回调

  1. 构造函数的简单实现 
    1. function Promise(executor) {
    2.     var self = this;
    3.     self.status = 'pending'; //promise当前的状态
    4.     self.data = undefined; //promise的值
    5.     self.onResolvedCallback = [];
    6.     //promise状态变为resolve时的回调函数集，可能有多个
    7.    function resolve(value) {
    8.        if(self.status === 'pending') {
    9.            self.status = 'resolved';
    10.            self.data = value;
    11.            for(var i = 0; i < self.onResolvedCallback.length; i++) {
    12.                self.onResolvedCallback[i](value);
    13.            }
    14.        }
    15.    }
    16.    executor(resolve);
    17. };
    18. Promise.prototype.then = function (resolve) {
    19.     this.onResolvedCallback.push(resolve);
    20. };

3. executor自执行函数接收的第二个参数为reject函数且reject函数在promise对象状态变为rejected时或executor抛出异常时触发。

  1. function Promise(executor) {
  2.     var self = this;
  3.     self.status = 'pending'; //promise当前的状态
  4.     self.data = undefined; //promise的值
  5.     self.onResolvedCallback = [];
  6.     //promise状态变为resolve时的回调函数集，可能有多个
  7.     self.onRejectedCallback = [];
  8.     //promise状态变为reject时的回调函数集，可能有多个
  9.    function resolve(value) {
  10.        if(self.status === 'pending') {
  11.            self.status = 'resolved';
  12.            self.data = value;
  13.            for(var i = 0; i < self.onResolvedCallback.length; i++) {
  14.                self.onResolvedCallback[i](value);
  15.            }
  16.        }
  17.    }
  18.  
  19.    function reject(reason) {
  20.         if(self.status === 'pending') {
  21.             self.status = 'rejected';
  22.             self.data = reason;
  23.             for(var i = 0; i < self.onRejectedCallback.length; i++) {
  24.                 self.onRejectedCallback[i](reason);
  25.             }
  26.         }
  27.    }
  28.  
  29.    try {
  30.        executor(resolve, reject);
  31.    } catch (e){
  32.        reject(e);
  33.    }
  34. };
  35. Promise.prototype.then = function (onResolve, onReject) {
  36.     this.onResolvedCallback.push(onResolve);
  37.     this.onRejectedCallback.push(onReject);
  38. };

 

then方法

  1. 在构造函数中的示例中，then方法并没有返回一个promise对象，而 Promise/A+ 规范中规定then方法用来注册promise对象状态改变时的回调，且返回一个新的promise对象。
    (1) then方法返回一个新的promise对象。
    (2) executor自执行函数中的resolve参数调用时执行then方法的第一个回调函数onResolved。
    (3) executor自执行函数中的reject参数调用时执行then方法的第二个回调函数onRejected。
  1. Promise.prototype.then = function (onResolved, onRejected) {
  2.     var self = this;
  3.     var promise2;
  4.     onResolved = typeof onResolved === 'function' 
  5.                 ? onResolved 
  6.                 : function (value) {return value};
  7.     onRejected = typeof onRejected === 'function' 
  8.                 ? onRejected 
  9.                 : function (reason) {throw reason};
  10.     //promise对象当前状态为resolved
  11.     if(self.status === 'resolved') {
  12.         return promise2 = new Promise(function (resolve, reject) {
  13.             try {
  14.                 //调用onResolve回调函数
  15.                 var x = onResolved(self.data);
  16.                 //如果onResolve回调函数返回值为一个promise对象
  17.                 if(x instanceof  Promise) {
  18.                     //将它的结果作为promise2的结果
  19.                     x.then(resolve, reject);
  20.                 } else {
  21.                     resolve(x);//执行promise2的onResolve回调
  22.            }        
  23.             } catch (e) {
  24.                 reject(e); //执行promise2的onReject回调
  25.             }
  26.         })
  27.     }
  28.     //promise对象当前状态为rejected
  29.     if(self.status === 'rejected') {
  30.         return promise2 = new Promise(function (resolve, reject) {
  31.             try {
  32.                 var x = onRejected(self.data);
  33.                 if (x instanceof Promise) {
  34.                     x.then(resolve, reject)
  35.                 } else {
  36.                     resolve(x)
  37.                 }
  38.             } catch (e) {
  39.                 reject(e)
  40.             }
  41.         })
  42.     }
  43.     //promise对象当前状态为pending
  44.     //此时并不能确定调用onResolved还是onRejected，需要等当前Promise状态确定。
  45.     //所以需要将callBack放入promise1的回调数组中
  46.     if(self.status === 'pending') {
  47.         return promise2 = new Promise(function (resolve, reject) {
  48.             self.onResolvedCallback.push(function (value) {
  49.                 try {
  50.                     var x = onResolved(self.data);
  51.                     if (x instanceof Promise) {
  52.                         x.then(resolve, reject);
  53.                     } else {
  54.                         resolve(x);
  55.           }
  56.                 } catch (e) {
  57.                     reject(e);
  58.                 }
  59.             })
  60.             self.onRejectedCallback.push(function(reason) {
  61.                 try {
  62.                     var x = onRejected(self.data);
  63.                     if (x instanceof Promise) {
  64.                         x.then(resolve, reject)
  65.                     } else {
  66.                         resolve(x);
  67.                     }
  68.                 } catch (e) {
  69.                     reject(e)
  70.                 }
  71.             })
  72.         })
  73.     }
  74. };

完整代码

  1. var Promise = (function() {
  2.     function Promise(resolver) {
  3.         if (typeof resolver !== 'function') { //resolver必须是函数
  4.             throw new TypeError('Promise resolver ' + resolver + ' is not a function')
  5.         }
  6.         if (!(this instanceof Promise)) return new Promise(resolver)
  7.  
  8.         var self = this //保存this
  9.         self.callbacks = [] //保存onResolve和onReject函数集合
  10.         self.status = 'pending' //当前状态
  11.  
  12.         function resolve(value) {
  13.             setTimeout(function() { //异步调用
  14.                 if (self.status !== 'pending') {
  15.                     return
  16.                 }
  17.                 self.status = 'resolved' //修改状态
  18.                 self.data = value
  19.  
  20.                 for (var i = 0; i < self.callbacks.length; i++) {
  21.                     self.callbacks[i].onResolved(value)
  22.                 }
  23.             })
  24.         }
  25.  
  26.         function reject(reason) {
  27.             setTimeout(function(){ //异步调用
  28.                 if (self.status !== 'pending') {
  29.                     return
  30.                 }
  31.                 self.status = 'rejected' //修改状态
  32.                 self.data = reason
  33.  
  34.                 for (var i = 0; i < self.callbacks.length; i++) {
  35.                     self.callbacks[i].onRejected(reason)
  36.                 }
  37.             })
  38.         }
  39.  
  40.         try{
  41.             resolver(resolve, reject) //执行resolver函数
  42.         } catch(e) {
  43.             reject(e)
  44.         }
  45.     }
  46.  
  47.     function resolvePromise(promise, x, resolve, reject) {
  48.         var then
  49.         var thenCalledOrThrow = false
  50.  
  51.         if (promise === x) {
  52.             return reject(new TypeError('Chaining cycle detected for promise!'))
  53.         }
  54.  
  55.         if ((x !== null) && ((typeof x === 'object') || (typeof x === 'function'))) {
  56.             try {
  57.                 then = x.then
  58.                 if (typeof then === 'function') {
  59.                     then.call(x, function rs(y) {
  60.                         if (thenCalledOrThrow) return
  61.                         thenCalledOrThrow = true
  62.                         return resolvePromise(promise, y, resolve, reject)
  63.                     }, function rj(r) {
  64.                         if (thenCalledOrThrow) return
  65.                         thenCalledOrThrow = true
  66.                         return reject(r)
  67.                     })
  68.                 } else {
  69.                     return resolve(x)
  70.                 }
  71.             } catch(e) {
  72.                 if (thenCalledOrThrow) return
  73.                 thenCalledOrThrow = true
  74.                 return reject(e)
  75.             }
  76.         } else {
  77.             return resolve(x)
  78.         }
  79.     }
  80.  
  81.     Promise.prototype.then = function(onResolved, onRejected) {
  82.         //健壮性处理，处理点击穿透
  83.         onResolved = typeof onResolved === 'function' ? onResolved : function(v){return v}
  84.         onRejected = typeof onRejected === 'function' ? onRejected : function(r){throw r}
  85.         var self = this
  86.         var promise2
  87.  
  88.         //promise状态为resolved
  89.         if (self.status === 'resolved') {
  90.             return promise2 = new Promise(function(resolve, reject) {
  91.                 setTimeout(function() {
  92.                     try {
  93.                         //调用then方法的onResolved回调
  94.                         var x = onResolved(self.data)
  95.                         //根据x的值修改promise2的状态
  96.                         resolvePromise(promise2, x, resolve, reject)
  97.                     } catch(e) {
  98.                         //promise2状态变为rejected
  99.                         return reject(e)
  100.                     }
  101.                 })
  102.             })
  103.         }
  104.  
  105.         //promise状态为rejected
  106.         if (self.status === 'rejected') {
  107.             return promise2 = new Promise(function(resolve, reject) {
  108.                 setTimeout(function() {
  109.                     try {
  110.                         //调用then方法的onReject回调
  111.                         var x = onRejected(self.data)
  112.                         //根据x的值修改promise2的状态
  113.                         resolvePromise(promise2, x, resolve, reject)
  114.                     } catch(e) {
  115.                         //promise2状态变为rejected
  116.                         return reject(e)
  117.                     }
  118.                 })
  119.             })
  120.         }
  121.  
  122.         //promise状态为pending
  123.         //需要等待promise的状态改变
  124.         if (self.status === 'pending') {
  125.             return promise2 = new Promise(function(resolve, reject) {
  126.                 self.callbacks.push({
  127.                     onResolved: function(value) {
  128.                         try {
  129.                             //调用then方法的onResolved回调
  130.                             var x = onResolved(value)
  131.                             //根据x的值修改promise2的状态
  132.                             resolvePromise(promise2, x, resolve, reject)
  133.                         } catch(e) {
  134.                             //promise2状态变为rejected
  135.                             return reject(e)
  136.                         }
  137.                     },
  138.                     onRejected: function(reason) {
  139.                         try {
  140.                             //调用then方法的onResolved回调
  141.                             var x = onRejected(reason)
  142.                             //根据x的值修改promise2的状态
  143.                             resolvePromise(promise2, x, resolve, reject)
  144.                         } catch(e) {
  145.                             //promise2状态变为rejected
  146.                             return reject(e)
  147.                         }
  148.                     }
  149.                 })
  150.             })
  151.         }
  152.     }
  153.  
  154.     //获取当前Promise传递的值
  155.     Promise.prototype.valueOf = function() {
  156.         return this.data
  157.     }
  158.  
  159.     //由then方法实现catch方法
  160.     Promise.prototype.catch = function(onRejected) {
  161.         return this.then(null, onRejected)
  162.     }
  163.  
  164.     //finally方法
  165.     Promise.prototype.finally = function(fn) {
  166.         return this.then(function(v){
  167.             setTimeout(fn)
  168.             return v
  169.         }, function(r){
  170.             setTimeout(fn)
  171.             throw r
  172.         })
  173.     }
  174.  
  175.     Promise.prototype.spread = function(fn, onRejected) {
  176.         return this.then(function(values) {
  177.             return fn.apply(null, values)
  178.         }, onRejected)
  179.     }
  180.  
  181.     Promise.prototype.inject = function(fn, onRejected) {
  182.         return this.then(function(v) {
  183.             return fn.apply(null, fn.toString().match(/\((.*?)\)/)[1].split(',').map(function(key){
  184.                 return v[key];
  185.             }))
  186.         }, onRejected)
  187.     }
  188.  
  189.     Promise.prototype.delay = function(duration) {
  190.         return this.then(function(value) {
  191.             return new Promise(function(resolve, reject) {
  192.                 setTimeout(function() {
  193.                     resolve(value)
  194.                 }, duration)
  195.             })
  196.         }, function(reason) {
  197.             return new Promise(function(resolve, reject) {
  198.                 setTimeout(function() {
  199.                     reject(reason)
  200.                 }, duration)
  201.             })
  202.         })
  203.     }
  204.  
  205.     Promise.all = function(promises) {
  206.         return new Promise(function(resolve, reject) {
  207.             var resolvedCounter = 0
  208.             var promiseNum = promises.length
  209.             var resolvedValues = new Array(promiseNum)
  210.             for (var i = 0; i < promiseNum; i++) {
  211.                 (function(i) {
  212.                     Promise.resolve(promises[i]).then(function(value) {
  213.                         resolvedCounter++
  214.                         resolvedValues[i] = value
  215.                         if (resolvedCounter == promiseNum) {
  216.                             return resolve(resolvedValues)
  217.                         }
  218.                     }, function(reason) {
  219.                         return reject(reason)
  220.                     })
  221.                 })(i)
  222.             }
  223.         })
  224.     }
  225.  
  226.     Promise.race = function(promises) {
  227.         return new Promise(function(resolve, reject) {
  228.             for (var i = 0; i < promises.length; i++) {
  229.                 Promise.resolve(promises[i]).then(function(value) {
  230.                     return resolve(value)
  231.                 }, function(reason) {
  232.                     return reject(reason)
  233.                 })
  234.             }
  235.         })
  236.     }
  237.  
  238.     Promise.resolve = function(value) {
  239.         var promise = new Promise(function(resolve, reject) {
  240.             resolvePromise(promise, value, resolve, reject)
  241.         })
  242.         return promise
  243.     }
  244.  
  245.     Promise.reject = function(reason) {
  246.         return new Promise(function(resolve, reject) {
  247.             reject(reason)
  248.         })
  249.     }
  250.  
  251.     Promise.fcall = function(fn){
  252.         // 虽然fn可以接收到上一层then里传来的参数，但是其实是undefined，所以跟没有是一样的，因为resolve没参数啊
  253.         return Promise.resolve().then(fn)
  254.     }
  255.  
  256.     Promise.done = Promise.stop = function(){
  257.         return new Promise(function(){})
  258.     }
  259.  
  260.     Promise.deferred = Promise.defer = function() {
  261.         var dfd = {}
  262.         dfd.promise = new Promise(function(resolve, reject) {
  263.             dfd.resolve = resolve
  264.             dfd.reject = reject
  265.         })
  266.         return dfd
  267.     }
  268.  
  269.     try { // CommonJS compliance
  270.         module.exports = Promise
  271.     } catch(e) {}
  272.  
  273.     return Promise
  274. })()

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/786694
推荐阅读
相关标签

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

  

闽ICP备14008679号