finally

time 1m

image.png

  1.     finally(cb) {
  2.         return this.then(value => {
  3.             // cb();
  4.             /*返回promise*/
  5.             return Promise.resolve(cb()).then(() => value);
  6.         }, reason => {
  7.             // cb();
  8.             return Promise.resolve(cb()).then(() => {
  9.                 throw reason;
  10.             });
  11.         })
  12.     }
  2.     /**
  3.      * 不管成功失败都会走的函数
  4.      * @param cb 回调函数，变量值都可以，不分resolve、reject，
  5.      * 因为它俩必有一个不会执行，而finally里面的内容必然执行
  6.      * @returns {MyPromise} 返回promise,里面有value、reason数据
  7.      */
  8.     finally(cb) {
  9.         /*因为要拿到上一次的结果，所以this.then*/
  10.         console.log(163,cb);
  11.         return this.then(value => {
  12.             /*这里需要等待cb的运行，通过then等待，运行then时会有异步处理
  13.             * 等待运行，观察者模式*/
  14.             // cb();
  15.             /*MyPromise.resolve(cb())得到cb的返回值，在这里是promise，但需要里面的value，promise对象
  16.             * 里面的数据，所以通过then取得数据*/
  19.             console.log(171,value);
  20.             /*这里面返回了一个promise对象，里面有return value，有value的数据，
  21.             * 返回value交给之后的then方法，外界的then方法，链式调用的then方法*/
  22.             return MyPromise.resolve(cb()).then(() => value);
  23.         }, reason => {
  24.             // cb();
  25.             console.log(176,reason);
  26.             return MyPromise.resolve(cb()).then(() => {
  27.                 throw reason;
  28.             });
  29.         })
  30.     }

image.png

all

time 19m56s
time 40m

  1.     /**
  2.      *
  3.      * @param promises  这是一个数组，里面分promise、一般数据不同的处理方式
  4.      * @returns {MyPromise}
  5.      */
  6.     static all(promises) {
  7.         return new MyPromise((resolve, reject) => {
  8.             let arr = [];
  9.             let index = 0;
  10.             const processData = (key, value) => {
  11.                 arr[key] = value;
  13.                 /*当值相等的时候，证明都放进去了，并且没有错误，这时才能resolve(数组)*/
  14.                 // if (arr.length === promises.length) {
  16.                 /*涉及到异步操作时，用push、下标等方法是不靠谱的，如果想保证下标的话，
  17.                 * 需要用计步器的方法，的方式，新建index变量从0开始记步，循环一遍就加一*/
  18.                 if (++index === promises.length) {
  19.                     resolve(arr);
  20.                 }
  22.                 /*   if (arr.length === promises.length) {
  23.                        resolve(arr);
  24.                    }
  25.    */
  26.             }
  28.             /*需要拿到所有promise的结果，再对结果进行判断*/
  29.             for (let i = 0; i < promises.length; i++) {
  30.                 let res = promises[i];
  31.                 if (isPromsie(res)) {
  32.                     res.then(data => {
  33.                         /*需要放入一个数组中*/
  34.                         // arr.push(data)
  36.                         /*因为数组内的promise对象之后才会被放进去，所以需要用下标放*/
  37.                         // arr[i] = data;
  39.                         /*每放入一次，都需要判断执行一次*/
  40.                         processData(i, data);
  41.                     }, err => {
  42.                         reject(err);
  43.                     })
  44.                 } else {
  45.                     // arr[i] = data;
  46.                     processData(i, res);
  47.                 }
  49.             }
  50.         })
  51.     }

race

time 51m

  1.    static race(promises) {
  2.         return new MyPromise((resolve, reject) => {
  4.             for (let i = 0; i < promises.length; i++) {
  5.                 let res = promises[i];
  6.                 if (isPromsie(res)) {
  7.                     /*   res.then((data) => {
  8.                            resolve(data)
  9.                        }, err => {
  10.                            reject(err);
  11.                        })*/
  13.                     res.then(resolve, reject);
  14.                 } else {
  15.                     resolve(res);
  16.                 }
  18.             }
  19.         })
  20.     }

总结

time 54m

  1. const isFunction = (fn) => typeof fn === 'function';
  2. const isPromsie = (value) => typeof value.then === "function";
  4. class MyPromise {
  5.     constructor(executor) {
  6.         this.state = 'pending';
  7.         this.value = undefined;
  8.         this.reason = undefined;
  9.         this.onFullFilledCallbacks = [];
  10.         this.onRejectedCallbacks = [];
  13.         let resolve = (value) => {
  15.             if (this.state === 'pending') {
  16.                 /*time 43m*/
  17.                 if (isPromsie(value)) {
  18.                     value.then(data => resolve(data), err => reject(err));
  19.                 } else {
  20.                     this.state = 'fullFilled';
  21.                     this.value = value;
  22.                     // this.onFullFilledCallbacks.forEach(fn => fn(this.value));
  23.                     this.onFullFilledCallbacks.forEach(fn => fn());
  24.                 }
  25.             }
  26.         }
  27.         let reject = (reason) => {
  28.             this.state = 'rejected';
  29.             this.reason = reason;
  30.             // this.onRejectedCallbacks.forEach(fn => fn(this.value));
  31.             this.onRejectedCallbacks.forEach(fn => fn());
  32.         }
  33.         // executor(resolve, reject);
  34.         try {
  35.             executor(resolve, reject);
  36.         } catch (err) {
  37.             reject(err)
  38.         }
  39.     }
  41.     then(onFullFilled, onRejected) {
  42.         onFullFilled = isFunction(onFullFilled) ? onFullFilled : data => data;
  43.         onRejected = isFunction(onRejected) ? onRejected : err => {
  44.             throw err;
  45.         };
  47.         /*因为判断是同步执行的*/
  48.         const p2 = new MyPromise((resolve, reject) => {
  49.             let x;
  50.             if (this.state === 'fullFilled') {
  52.                 /*让resolvePromise(p2, x, resolve, reject);之后再运行，如果p2声明赋值时*/
  53.                 setTimeout(() => {
  54.                     try {
  55.                         x = onFullFilled(this.value);
  56.                         // console.log(172, x);
  57.                         resolvePromise(p2, x, resolve, reject);
  58.                     } catch (err) {
  59.                         reject(err)
  60.                     }
  62.                 }, 0)
  64.                 /*                x = onFullFilled(this.value);
  65.                                 // console.log('165:'+x)
  66.                                 // resolve(x);
  67.                                 resolvePromise(p2, x, resolve, reject)*/
  69.             }
  70.             if (this.state === 'rejected') {
  72.                 setTimeout(() => {
  73.                     try {
  74.                         x = onRejected(this.reason);
  75.                         resolvePromise(p2, x, resolve, reject);
  76.                     } catch (err) {
  77.                         reject(err)
  78.                     }
  80.                 }, 0)
  82.             }
  83.             if (this.state === 'pending') {
  84.                 /* this.onFullFilledCallbacks.push(onFullFilled);
  85.                  this.onRejectedCallbacks.push(onRejected);*/
  87.                 this.onFullFilledCallbacks.push(() => {
  89.                     setTimeout(() => {
  90.                         try {
  91.                             x = onFullFilled(this.value);
  92.                             resolvePromise(p2, x, resolve, reject);
  93.                         } catch (err) {
  94.                             reject(err)
  95.                         }
  97.                     }, 0)
  99.                 });
  101.                 this.onRejectedCallbacks.push(() => {
  102.                     setTimeout(() => {
  103.                         try {
  104.                             x = onRejected(this.reason);
  105.                             resolvePromise(p2, x, resolve, reject);
  106.                         } catch (err) {
  107.                             reject(err)
  108.                         }
  110.                     }, 0)
  112.                     /*      x = onRejected(this.reason);
  113.                           // resolve(x);
  114.                           resolvePromise(p2, x, resolve, reject);*/
  115.                 });
  116.             }
  117.         })
  118.         return p2;
  119.     }
  121.     catch(onRejected) {
  122.         return this.then(null, onRejected);
  123.     }
  125.     /**
  126.      *
  127.      * @param value
  128.      */
  129.     static resolve(value) {
  130.         /*  if (isPromsie(value)) {
  131.               // return value;
  132.               return value.then((y) => {
  134.               });
  135.           } else {
  136.               return new MyPromise((resolve, reject) => {
  137.                   resolve(value)
  138.               })
  139.           }*/
  141.         return new MyPromise((resolve, reject) => {
  142.             resolve(value)
  143.         })
  144.     }
  146.     finally(cb) {
  147.         return this.then(value => {
  148.             // cb();
  149.             /*返回promise*/
  150.             return Promise.resolve(cb()).then(() => value);
  151.         }, reason => {
  152.             // cb();
  153.             return Promise.resolve(cb()).then(() => {
  154.                 throw reason;
  155.             });
  156.         })
  157.     }
  159.     static all(promises) {
  160.         return new MyPromise((resolve, reject) => {
  161.             let arr = [];
  162.             let index = 0;
  163.             const processData = (key, value) => {
  164.                 arr[key] = value;
  166.                 if (++index === promises.length) {
  167.                     resolve(arr);
  168.                 }
  170.                 /*   if (arr.length === promises.length) {
  171.                        resolve(arr);
  172.                    }
  173.    */
  174.             }
  176.             for (let i = 0; i < promises.length; i++) {
  177.                 let res = promises[i];
  178.                 if (isPromsie(res)) {
  179.                     res.then(data => {
  180.                         // arr[i] = data;
  181.                         processData(i, data);
  182.                     }, err => {
  183.                         reject(err);
  184.                     })
  185.                 } else {
  186.                     // arr[i] = data;
  187.                     processData(i, res);
  188.                 }
  190.             }
  191.         })
  192.     }
  194.     static race(promises) {
  195.         return new MyPromise((resolve, reject) => {
  197.             for (let i = 0; i < promises.length; i++) {
  198.                 let res = promises[i];
  199.                 if (isPromsie(res)) {
  200.                     /*   res.then((data) => {
  201.                            resolve(data)
  202.                        }, err => {
  203.                            reject(err);
  204.                        })*/
  206.                     res.then(resolve, reject);
  207.                 } else {
  208.                     resolve(res);
  209.                 }
  211.             }
  212.         })
  213.     }
  215. }
  218. function resolvePromise(p2, x, resolve, reject) {
  219.     // console.log(192, p2, x, resolve, reject);
  220.     // console.log(209,a);
  222.     let called;
  224.     if (p2 === x) {
  225.         reject(new TypeError('typeErr'));
  226.     }
  228.     /*x可以是个方法，再return出去一个值*/
  229.     if ((typeof x === 'object' && x != null) || x === 'function') {
  230.         try {
  231.             /*thenable对象，这是处理return new Promise的情况*/
  232.             let then = x.then;
  233.             if (typeof then === 'function') {
  235.                 /* then.call(x是让then需要上下文，让then的上下文，变成x，变成
  236.                 * 返回的promise，相当于返回的promise.then*/
  238.                 then.call(x, y => {
  240.                     /*x.then值是一样的*/
  241.                     // x.then(y => {
  243.                     /*这时then独立调用指向window*/
  244.                     // then(y=>{
  246.                     if (called) return;
  247.                     called = true;
  249.                     console.log(250, y);
  250.                     resolve(y);
  251.                 }, r => {
  252.                     if (called) return;
  253.                     called = true;
  254.                     console.log(252, r);
  255.                     reject(r);
  256.                 })
  258.             } else {
  259.                 if (called) return;
  260.                 called = true;
  261.                 resolve(x);
  262.             }
  263.         } catch (err) {
  264.             if (called) return;
  265.             called = true;
  266.             reject(err);
  267.         }
  268.     } else {
  269.         /*这里不需要锁了*/
  270.         resolve(x);
  271.     }
  273. }
  275. /*/!*换成mypromise*!/
  276. // const p1 = new Promise((resolve, reject) => {
  277. const p1 = new MyPromise((resolve, reject) => {
  278.     // setTimeout(() => {
  279.     resolve(1);
  280.     // reject(1);
  281.     // }, 1000)
  282. })
  285. const p2 = p1.then((res) => {
  286.     // console.log(res);
  287.     // return res + 1;
  289.     /!*返回值是一个Promise，想要拿到里面的reject，怎么拿到，需要通过得到它xx，
  290.     * xx.then的方式得到10*!/
  291.     return new MyPromise((resolve, reject) => {
  292.         reject(10);
  293.     })
  295. }, err => {
  296.     // console.log(err)
  297.     return err + 2;
  298. })
  300. p2.then(res => {
  301.     console.log(266, res, 'success');
  302. }, err => {
  303.     console.log(268, err, 'error');
  304. })*/
  306. const p1 = new MyPromise((resolve, reject) => {
  307.     setTimeout(() => {
  308.         reject('1000');
  309.     }, 3000)
  310. })
  312. MyPromise.resolve(p1)
  313.     .then(res => console.log(res, 'success')
  314.         , err => console.log(err, 'fail')
  315.     )
  1. const isFunction = (fn) => typeof fn === 'function';
  3. /**
  4.  * 判断值是否是promise对象，thanable对象
  5.  * @param value 参数，在这里是回调函数，比如promise.resolve的参数，可能是函数，
  6.  * 可能是promise对象
  7.  * @returns {boolean} 是否是promise对象，thenable对象
  8.  */
  9. const isPromsie = (value) => typeof value.then === "function";
  11. class MyPromise {
  12.     constructor(executor) {
  13.         this.state = 'pending';
  14.         this.value = undefined;
  15.         this.reason = undefined;
  16.         this.onFullFilledCallbacks = [];
  17.         this.onRejectedCallbacks = [];
  20.         let resolve = (value) => {
  22.             if (this.state === 'pending') {
  23.                 /*time 43m*/
  24.                 if (isPromsie(value)) {
  25.                     /*递归调用，继续resolve，如果是reject走reject
  26.                     * value是promise，但最终还是得resolve或reject，所以得用then
  27.                     * 运行，为了运行resolve、或者reject，通过then取出promise对象value
  28.                     * 中的值，进行resolve或者reject，reject是不能运行一个promise对象的*/
  29.                     value.then(data => resolve(data), err => reject(err));
  30.                 } else {
  31.                     this.state = 'fullFilled';
  32.                     this.value = value;
  33.                     // this.onFullFilledCallbacks.forEach(fn => fn(this.value));
  34.                     this.onFullFilledCallbacks.forEach(fn => fn());
  35.                 }
  36.             }
  37.         }
  39.         let reject = (reason) => {
  40.             this.state = 'rejected';
  41.             this.reason = reason;
  42.             // this.onRejectedCallbacks.forEach(fn => fn(this.value));
  43.             this.onRejectedCallbacks.forEach(fn => fn());
  44.         }
  45.         // executor(resolve, reject);
  46.         try {
  47.             executor(resolve, reject);
  48.         } catch (err) {
  49.             reject(err)
  50.         }
  51.     }
  53.     then(onFullFilled, onRejected) {
  54.         onFullFilled = isFunction(onFullFilled) ? onFullFilled : data => data;
  55.         onRejected = isFunction(onRejected) ? onRejected : err => {
  56.             throw err;
  57.         };
  59.         /*因为判断是同步执行的*/
  60.         const p2 = new MyPromise((resolve, reject) => {
  61.             let x;
  62.             if (this.state === 'fullFilled') {
  64.                 /*让resolvePromise(p2, x, resolve, reject);之后再运行，如果p2声明赋值时*/
  65.                 setTimeout(() => {
  66.                     try {
  67.                         x = onFullFilled(this.value);
  68.                         // console.log(172, x);
  69.                         resolvePromise(p2, x, resolve, reject);
  70.                     } catch (err) {
  71.                         reject(err)
  72.                     }
  74.                 }, 0)
  76.                 /*                x = onFullFilled(this.value);
  77.                                 // console.log('165:'+x)
  78.                                 // resolve(x);
  79.                                 resolvePromise(p2, x, resolve, reject)*/
  81.             }
  82.             if (this.state === 'rejected') {
  84.                 setTimeout(() => {
  85.                     try {
  86.                         x = onRejected(this.reason);
  87.                         resolvePromise(p2, x, resolve, reject);
  88.                     } catch (err) {
  89.                         reject(err)
  90.                     }
  92.                 }, 0)
  94.             }
  95.             if (this.state === 'pending') {
  96.                 /* this.onFullFilledCallbacks.push(onFullFilled);
  97.                  this.onRejectedCallbacks.push(onRejected);*/
  99.                 this.onFullFilledCallbacks.push(() => {
  101.                     setTimeout(() => {
  102.                         try {
  103.                             x = onFullFilled(this.value);
  104.                             resolvePromise(p2, x, resolve, reject);
  105.                         } catch (err) {
  106.                             reject(err)
  107.                         }
  109.                     }, 0)
  111.                 });
  113.                 this.onRejectedCallbacks.push(() => {
  114.                     setTimeout(() => {
  115.                         try {
  116.                             x = onRejected(this.reason);
  117.                             resolvePromise(p2, x, resolve, reject);
  118.                         } catch (err) {
  119.                             reject(err)
  120.                         }
  122.                     }, 0)
  124.                     /*      x = onRejected(this.reason);
  125.                           // resolve(x);
  126.                           resolvePromise(p2, x, resolve, reject);*/
  127.                 });
  128.             }
  129.         })
  130.         return p2;
  131.     }
  133.     catch(onRejected) {
  134.         return this.then(null, onRejected);
  135.     }
  137.     /**
  138.      *
  139.      * @param value
  140.      */
  141.     static resolve(value) {
  142.         /*        if (isPromsie(value)) {
  143.                     return value;
  144.                 } else {
  145.                     return new MyPromise((resolve, reject) => {
  146.                         resolve(value)
  147.                     })
  148.                 }*/
  150.         return new MyPromise((resolve, reject) => {
  151.             resolve(value)
  152.         })
  153.     }
  155.     /**
  156.      * 不管成功失败都会走的函数
  157.      * @param cb 回调函数，变量值都可以，不分resolve、reject，
  158.      * 因为它俩必有一个不会执行，而finally里面的内容必然执行
  159.      * @returns {MyPromise} 返回promise,里面有value、reason数据
  160.      */
  161.     finally(cb) {
  162.         /*因为要拿到上一次的结果，所以this.then*/
  163.         console.log(163, cb);
  164.         return this.then(value => {
  165.             /*这里需要等待cb的运行，通过then等待，运行then时会有异步处理
  166.             * 等待运行，观察者模式*/
  167.             // cb();
  168.             /*MyPromise.resolve(cb())得到cb的返回值，在这里是promise，但需要里面的value，promise对象
  169.             * 里面的数据，所以通过then取得数据*/
  172.             console.log(171, value);
  173.             /*这里面返回了一个promise对象，里面有return value，有value的数据，
  174.             * 返回value交给之后的then方法，外界的then方法，链式调用的then方法*/
  175.             return MyPromise.resolve(cb()).then(() => value);
  176.         }, reason => {
  177.             // cb();
  178.             console.log(176, reason);
  179.             return MyPromise.resolve(cb()).then(() => {
  180.                 throw reason;
  181.             });
  182.         })
  183.     }
  185.     /**
  186.      *
  187.      * @param promises  这是一个数组，里面分promise、一般数据不同的处理方式
  188.      * @returns {MyPromise}
  189.      */
  190.     static all(promises) {
  191.         return new MyPromise((resolve, reject) => {
  192.             let arr = [];
  193.             let index = 0;
  194.             const processData = (key, value) => {
  195.                 arr[key] = value;
  197.                 /*当值相等的时候，证明都放进去了，并且没有错误，这时才能resolve(数组)*/
  198.                 // if (arr.length === promises.length) {
  200.                 /*涉及到异步操作时，用push、下标等方法是不靠谱的，如果想保证下标的话，
  201.                 * 需要用计步器的方法，的方式，新建index变量从0开始记步，循环一遍就加一*/
  202.                 if (++index === promises.length) {
  203.                     resolve(arr);
  204.                 }
  206.                 /*   if (arr.length === promises.length) {
  207.                        resolve(arr);
  208.                    }
  209.    */
  210.             }
  212.             /*需要拿到所有promise的结果，再对结果进行判断*/
  213.             for (let i = 0; i < promises.length; i++) {
  214.                 let res = promises[i];
  215.                 if (isPromsie(res)) {
  216.                     res.then(data => {
  217.                         /*需要放入一个数组中*/
  218.                         // arr.push(data)
  220.                         /*因为数组内的promise对象之后才会被放进去，所以需要用下标放*/
  221.                         // arr[i] = data;
  223.                         /*每放入一次，都需要判断执行一次*/
  224.                         processData(i, data);
  225.                     }, err => {
  226.                         reject(err);
  227.                     })
  228.                 } else {
  229.                     // arr[i] = data;
  230.                     processData(i, res);
  231.                 }
  233.             }
  234.         })
  235.     }
  238.     static race(promises) {
  239.         return new MyPromise((resolve, reject) => {
  241.             for (let i = 0; i < promises.length; i++) {
  242.                 let res = promises[i];
  243.                 if (isPromsie(res)) {
  244.                     /*   res.then((data) => {
  245.                            resolve(data)
  246.                        }, err => {
  247.                            reject(err);
  248.                        })*/
  250.                     res.then(resolve, reject);
  251.                 } else {
  252.                     resolve(res);
  253.                 }
  255.             }
  256.         })
  257.     }
  259. }
  262. function resolvePromise(p2, x, resolve, reject) {
  263.     // console.log(192, p2, x, resolve, reject);
  264.     // console.log(209,a);
  266.     let called;
  268.     if (p2 === x) {
  269.         reject(new TypeError('typeErr'));
  270.     }
  272.     /*x可以是个方法，再return出去一个值*/
  273.     if ((typeof x === 'object' && x != null) || x === 'function') {
  274.         try {
  275.             /*thenable对象，这是处理return new Promise的情况*/
  276.             let then = x.then;
  277.             if (typeof then === 'function') {
  279.                 /* then.call(x是让then需要上下文，让then的上下文，变成x，变成
  280.                 * 返回的promise，相当于返回的promise.then*/
  282.                 then.call(x, y => {
  284.                     /*x.then值是一样的*/
  285.                     // x.then(y => {
  287.                     /*这时then独立调用指向window*/
  288.                     // then(y=>{
  290.                     if (called) return;
  291.                     called = true;
  293.                     // console.log(250, y);
  294.                     resolve(y);
  295.                 }, r => {
  296.                     if (called) return;
  297.                     called = true;
  298.                     // console.log(252, r);
  299.                     reject(r);
  300.                 })
  302.             } else {
  303.                 if (called) return;
  304.                 called = true;
  305.                 resolve(x);
  306.             }
  307.         } catch (err) {
  308.             if (called) return;
  309.             called = true;
  310.             reject(err);
  311.         }
  312.     } else {
  313.         /*这里不需要锁了*/
  314.         resolve(x);
  315.     }
  317. }
  319. /*/!*换成mypromise*!/
  320. // const p1 = new Promise((resolve, reject) => {
  321. const p1 = new MyPromise((resolve, reject) => {
  322.     // setTimeout(() => {
  323.     resolve(1);
  324.     // reject(1);
  325.     // }, 1000)
  326. })
  329. const p2 = p1.then((res) => {
  330.     // console.log(res);
  331.     // return res + 1;
  333.     /!*返回值是一个Promise，想要拿到里面的reject，怎么拿到，需要通过得到它xx，
  334.     * xx.then的方式得到10*!/
  335.     return new MyPromise((resolve, reject) => {
  336.         reject(10);
  337.     })
  339. }, err => {
  340.     // console.log(err)
  341.     return err + 2;
  342. })
  344. p2.then(res => {
  345.     console.log(266, res, 'success');
  346. }, err => {
  347.     console.log(268, err, 'error');
  348. })*/
  350. /*const p1 = new MyPromise((resolve, reject) => {
  351.     setTimeout(() => {
  352.         reject('1000');
  353.     }, 3000)
  354. })*/
  356. const p1 = new MyPromise((resolve, reject) => {
  357.     resolve('1000');
  358. })
  361. /*MyPromise.resolve(p1)
  362.     .then(res => console.log(res, 'success')
  363.         , err => console.log(err, 'fail')
  364.     )*/
  367. MyPromise.resolve(p1).finally((res) => {
  368.     return new MyPromise((resolve, reject) => {
  369.         setTimeout(() => {
  370.             resolve(110);
  371.         }, 3000)
  372.     })
  373. })
  374.     .then(res => console.log(res, 'success')
  375.         , err => {
  376.             console.log(err, 'fail')
  377.         });