• 手写Promise

    1.想要进行手写Promise，首先需要知道promise 的基本特性及用法

    1. 有一个Promise构造函数，传入resolve和reject两个参数，是两个可以执行的函数
    2. promise有三种状态：pending等待，fulfilled成功，rejected失败
    3. 状态pending 一旦转为fulfilled或者rejected，不能再更改
    4. resolve()方法为成功处理方法，将状态由pending转为fulfilled，且传入参数value
    5. reject()方法为失败处理方法，将状态由pending转为rejected，且传入参数reason
    6. then()方法接受两个参数，分别为onFulfilled和onRejected函数，当状态由pending转为fulfilled后执行onFulfilled函数，由pending转为rejected后指向onRejected函数
    7. .then()方法支持链式调用，创建Promise实例后，可以通过实例一直调用.then()方法触发
    8. 静态方法的实现：Promise.resolve()，Promise.reject()，Promise.all()

    2.最终需要实现的效果：实现一个最基本的 promise案例

    1. let p = new Promise((resolve, reject) => {
    2.    //支持异步操作
    3.     setTimeout(function(){
    4.         resolve('success')
    5.     },1000);
    6.   //resolve('success')
    7.   // reject('error')
    8. })
    9. p.then(data => {
    10.   console.log(data)
    11.  return data;
    12. }).then(data=>{
    13.     console.log(data);
    14. })

    3.实现步骤

    1. 需要创建一个Promise类，并且添加一个回调方法 callback，作为Promise 的参数
    2. callback接收resolve 和 reject 作为参数，并且resolve 和 reject为两个函数且分别接受参数value和reason
    3. 定义promise的三种状态，实现then方法：定义promise的初始状态pending(后面两个状态在执行对应函数resolve和reject后进行更改)；实现then方法：传入两个函数参数（onFulfilled和onRejected）通过判断状态执行对应函数
    4. then()方法可实现异步操作(用定时器进行测试)
    5. 实现链式调用
    6. 添加静态方法

    3.1需要创建一个类，并且添加一个回调方法 callback，作为Promise 的参数

    1.         class MPromise {
    2.             constructor(callback) {
    3.                 // 执行回调函数
    4.                 callback();
    5.             }
    6.         }

    3.2callback接收resolve 和 reject 作为参数，并且resolve 和 reject为两个函数且分别接受参数value和reason

    1.         class MPromise {
    2.             constructor(callback) {
    3.                 // 定义成功返回参数。为什在构造器里面定义？
    4.                 this.value = undefined;
    5.  
    6.                 // 定义失败返回参数
    7.                 this.reason = undefined;
    8.  
    9.                 // 定义两个处理函数
    10.                 const resolve = (value) => {
    11.                     this.value = value;
    12.                     console.log(this.value);
    13.                 }
    14.  
    15.                 const reject = (reason) => {
    16.                     this.reason = reason;
    17.                 }
    18.  
    19.                 // 执行回调函数
    20.                 callback(resolve,reject);
    21.             }
    22.         }
    23.  
    24.         // MPromise类调用
    25.         let p = new MPromise((resolve,reject)=>{
    26.             resolve("success");
    27.         });

    3.3定义和赋值promise的三种状态，实现then方法

    定义promise的初始状态pending(后面两个状态在执行对应函数resolve和reject后进行更改)

    实现then方法：传入

    1.         class MPromise {
    2.             constructor(callback) {
    3.                 // 定义成功返回参数。为什在构造器里面定义？
    4.                 this.value = undefined;
    5.                 // 定义失败返回参数
    6.                 this.reason = undefined;
    7.  
    8.                 // 定义promise的初始状态pending(后面两个状态在执行对应函数后进行更改)
    9.                 this.state = 'pending';
    10.  
    11.                 // 定义两个处理函数
    12.                 const resolve = (value) => {
    13.                     this.value = value;
    14.                     if(this.state === 'pending'){
    15.                         this.state = 'fulfilled';
    16.                     }
    17.                 }
    18.  
    19.                 const reject = (reason) => {
    20.                     this.reason = reason;
    21.                     if(this.state === 'pending'){
    22.                         this.state = 'rejected';
    23.                     }
    24.                 }
    25.  
    26.                 // 执行回调函数
    27.                 callback(resolve,reject);
    28.             }
    29.             // then方法时MPromise创建的实例调用的所以在constructor外
    30.             // then()方法会接受两个函数参数（onFulfilled和onRejected）
    31.             then(onFulfilled,onRejected){
    32.                 // 容错：onFulfilled,onRejected存在且为function时才能进行调用
    33.                 let onFulfilledState = onFulfilled ? typeof onFulfilled === 'function' : true; //判断如果onFulfilled传入了则继续判断是否为function函数，否则直接返回true传入什么返回什么
    34.                 let onRejectedState = onRejected ? typeof onRejected === 'function' : true;
    35.                 if(onFulfilledState && onRejectedState){
    36.                     // 根据对应状态调用不同的处理函数
    37.                     if(this.state === 'fulfilled'){
    38.                         onFulfilled(this.value);
    39.                     }
    40.                     
    41.                     if(this.state === 'rejected'){
    42.                         onRejected(this.value);
    43.                     }
    44.                 }
    45.             }
    46.         }
    47.  
    48.         // MPromise类调用
    49.         let p = new MPromise((resolve,reject)=>{
    50.             resolve("success");
    51.         });
    52.         p.then((data)=>{
    53.             console.log(data);
    54.         });

    3.4 then()方法可实现异步操作

    以上代码，如果加入定时器实现异步就会发现打印不了

    1.         // MPromise类调用
    2.         let p = new MPromise((resolve,reject)=>{
    3.             setTimeout(function (){
    4.             resolve("success");
    5.            },1000)
    6.         });
    7.         p.then((data)=>{
    8.             console.log(data);
    9.         });

    给then方法加入返回值 new MPromise发现还是没有返回

    1.             then(onFulfilled, onRejected) {
    2.                 return new MPromise((resolve, reject) => {
    3.                     // 容错：onFulfilled,onRejected存在且为function时才能进行调用
    4.                     let onFulfilledState = onFulfilled ? typeof onFulfilled === 'function' : true; //判断如果onFulfilled传入了则继续判断是否为function函数，否则直接返回true传入什么返回什么
    5.                     let onRejectedState = onRejected ? typeof onRejected === 'function' : true;
    6.                     if (onFulfilledState && onRejectedState) {
    7.                         
    8.                         // 根据对应状态调用不同的处理函数
    9.                         if (this.state === 'fulfilled') {
    10.                             resolve(onFulfilled(this.value));
    11.                         }
    12.  
    13.                         if (this.state === 'rejected') {
    14.                             reject(onRejected(this.value));
    15.                         }
    16.                     }
    17.                 });
    18.             }

     为什么加入了new MPromise()后还是没有返回？因为这里是通过setTimeout()进行异步操作，当执行then方法时，回调函数中的resolve()并未执行完成，就会导致状态一直是pending

    分析：发现p.then方法里面的函数不会触发，setTimeout()里面的resolve也没有执行

    为什么加入了new MPromise()后还是没有返回？因为new MPromise()时，发现setTimeout()定时任务就会将其放到异步队列里面，而通过p.then()调用方法时，回调函数中的resolve()并未执行完成，this.state状态一直处于pending状态，自然也就没有调用resolve(onFulfilled())方法

    解决思路：(观察者模式)

    既然 then 自己无法知道 resolve 什么时候执行，是否执行了，那resolve执行完后就需要有个东西告诉then，执行完了。

    即在then里面判断为pending状态时，将成功和失败的方法分别记录到一个数组里面，然后再分别再resolve()和reject()触发时，再去遍历执行数组存进去的函数

    关键代码：

    1.                 // 设置数组用于存放异步队列中所有的resolve和reject函数
    2.                 this.onResolveCallback = [];
    3.                 this.onRejectCallback = [];
    4.  
    5.                 // 定义两个处理函数
    6.                 const resolve = (value) => {
    7.                     this.value = value;
    8.                     if (this.state === 'pending') {
    9.                         this.state = 'fulfilled';
    10.                     }
    11.                     if (this.state === 'fulfilled') {
    12.                         this.onResolveCallback.forEach(resolveCb => resolveCb(this.value));
    13.                     }
    14.                 }
    15.  
    16.                 const reject = (reason) => {
    17.                     this.reason = reason;
    18.                     if (this.state === 'pending') {
    19.                         this.state = 'rejected';
    20.                     }
    21.                     if (this.state === 'rejected') {
    22.                         this.onRejectCallback.forEach(rejectCb => rejectCb(this.reason));
    23.                     }
    24.                 }
    25. .......
    26. // 当异步执行时，状态会一直为pending
    27.     if(this.state === 'pending') {
    28.  
    29.       this.onResolveCallback.push(() => {
    30.         onFulfilled(this.value)
    31.       })
    32.       this.onRejectCallback.push(() => {
    33.         onRejected(this.reason)
    34.       })
    35.     }

    完整代码：

    1.        class MPromise {
    2.             constructor(callback) {
    3.                 // 定义成功返回参数。为什在构造器里面定义？
    4.                 this.value = undefined;
    5.                 // 定义失败返回参数
    6.                 this.reason = undefined;
    7.  
    8.                 // 定义promise的初始状态pending(后面两个状态在执行对应函数后进行更改)
    9.                 this.state = 'pending';
    10.  
    11.                 // 设置数组用于存放异步队列中所有的resolve和reject函数
    12.                 this.onResolveCallback = [];
    13.                 this.onRejectCallback = [];
    14.  
    15.                 // 定义两个处理函数
    16.                 const resolve = (value) => {
    17.                     this.value = value;
    18.                     if (this.state === 'pending') {
    19.                         this.state = 'fulfilled';
    20.                     }
    21.                     if (this.state === 'fulfilled') {
    22.                         this.onResolveCallback.forEach(resolveCb => resolveCb(this.value));
    23.                     }
    24.                 }
    25.  
    26.                 const reject = (reason) => {
    27.                     this.reason = reason;
    28.                     if (this.state === 'pending') {
    29.                         this.state = 'rejected';
    30.                     }
    31.                     if (this.state === 'rejected') {
    32.                         this.onRejectCallback.forEach(rejectCb => rejectCb(this.reason));
    33.                     }
    34.                 }
    35.  
    36.                 // 执行回调函数
    37.                 callback(resolve, reject);
    38.             }
    39.             // then方法时MPromise创建的实例调用的所以在constructor外
    40.             // then()方法会接受两个函数参数（onFulfilled和onRejected）
    41.             then(onFulfilled, onRejected) {
    42.                 return new MPromise((resolve, reject) => {
    43.                     // 容错：onFulfilled,onRejected存在且为function时才能进行调用
    44.                     let onFulfilledState = onFulfilled ? typeof onFulfilled === 'function' : true; //判断如果onFulfilled传入了则继续判断是否为function函数，否则直接返回true传入什么返回什么
    45.                     let onRejectedState = onRejected ? typeof onRejected === 'function' : true;
    46.                     if (onFulfilledState && onRejectedState) {
    47.  
    48.                         // 根据对应状态调用不同的处理函数
    49.                         if (this.state === 'fulfilled') {
    50.                             resolve(onFulfilled(this.value));
    51.                         }
    52.  
    53.                         if (this.state === 'rejected') {
    54.                             reject(onRejected(this.value));
    55.                         }
    56.                         // 当异步执行时，状态会一直为pending
    57.                         if (this.state === 'pending') {
    58.                                 // push进去的是下一次resolve函数
    59.                                             
    60.                        this.onResolveCallback.push(()=>onFulfilled(this.value));                               
    61.                         this.onRejectCallback.push(()=>onRejected(this.reason));
    62.                         }
    63.                     }
    64.                 });
    65.             }
    66.         }
    67.  
    68.         // MPromise类调用
    69.         let p = new MPromise((resolve, reject) => {
    70.             setTimeout(function () {
    71.                 resolve("success");
    72.                 // reject("error");
    73.             }, 1000)
    74.         });
    75.         p.then((data) => {
    76.             console.log(data);
    77.             return data
    78.         },err=>{
    79.             console.log(err);
    80.         }).then((data)=>{
    81.             console.log("第二次调用then",data);
    82.             
    83.         })

    3.5实现链式调用

    链式调用的本质是需要调用then方法后返回一个promise对象，且内部仍然会执行resolve和reject函数

    特点：后面每个.then()方法中能获得上一个.then()返回的参数

    解决：push进数组时再通过resolve方法执行就能重新通过then进行调用

    1.                         // 当异步执行时，状态会一直为pending
    2.                         if (this.state === 'pending') {
    3.                                 this.onResolveCallback.push(()=>resolve(onFulfilled(this.value)));
    4.                                 this.onRejectCallback.push(()=>resolve(onRejected(this.reason)));
    5.                         }

    3.6添加静态方法（Promise.resolve,Promise.reject,Promise.all）

    其实就是单独调用new MPromise里面的resolve方法

    1.             // 其实就是单独调用new MPromise里面的resolve方法
    2.             static resolve = (value) => new MPromise((resolve,reject)=>resolve(value));
    3.             static reject = (reason) => new MPromise((resolve,reject)=>resolve(reason));
    4.  
    5.         MPromise.resolve("这是静态方法MPromise.resolve调用").then((data)=>{
    6.             console.log(data);
    7.             return data;
    8.         }).then(data=>{
    9.             console.log("第二次调用静态方法MPromise.resolve调用",data);
    10.  
    11.         })
    12.         MPromise.reject("这是静态方法MPromise.reject调用").then((error)=>{
    13.             console.log(error);
    14.         })

    MPromise.all() 关键是需要在循环中调用promise.then()方法向下执行，最后判断数组中所有promise执行完后，通过resolve返回结果

    1.             static all = (promiseArr) => new MPromise((resolve, reject)=>{
    2.                 // 使用数组存放所有MPromise传入的参数数据
    3.                 let results = [];
    4.                 // 使用count记录处理的MPromise，每处理一个+1，直到最后一个处理完就返回参数数组
    5.                 let count = 0;
    6.                 promiseArr.forEach((promise,index)=>{
    7.                     promise.then(item=>{
    8.                         results[index] = item;
    9.                         count++;
    10.                         console.log(promise.value);
    11.                         // 注意此处用数组下标判断会出现问题：setTimeout()异步的会等results其他输出后第二次输出
    12.                         if(count === promiseArr.length){
    13.                             resolve(results);
    14.                         }
    15.                     });
    16.                     
    17.                 });
    18.             })
    19.  
    20.         let p1 = new MPromise(1);
    21.         let p2 = new MPromise((resolve, reject) => {
    22.             setTimeout(function(){
    23.                 resolve("p2");
    24.             }, 2000);
    25.         })
    26.         let p3 = new MPromise((resolve, reject) => {
    27.             resolve("p3");
    28.         })
    29.         let p4 = new MPromise((resolve, reject) => {
    30.             resolve("p4");
    31.         })
    32.  
    33.         MPromise.all([p1, p2, p3, p4]).then(result => {
    34.             console.log(result);
    35.         });

    4.问题（实现Promise.all()时为什么不能通过数组循环的index判断if( index+1 === promiseArr.length )所有的promise已执行完成可以返回结果了）

    手写promise中，Promise.all方法实现时，为什么不能使用index进行判断（异步时不会同时打印，等其他打印完再打印异步的）

    使用index判断打印的结果为：p1,p3,p4。p2过一秒后才打印

    1.             static all = (promiseArr) => new MPromise((resolve, reject)=>{
    2.                 // 使用数组存放所有MPromise传入的参数数据
    3.                 let results = [];
    4.                 // 使用count记录处理的MPromise，每处理一个+1，直到最后一个处理完就返回参数数组
    5.                 let count = 0;
    6.                 promiseArr.forEach((promise,index)=>{
    7.                     promise.then(item=>{
    8.                         results[index] = item;
    9.                         count++;
    10.                         console.log(promise.value);
    11.                         // 注意此处用数组下标判断会出现问题：setTimeout()异步的会等results其他输出后第二次输出
    12.                         if(count === promiseArr.length){
    13.                             resolve(results);
    14.                         }
    15.                     });
    16.                     
    17.                 });
    18.             })

    问题分析：

    promise.then()被调用才能表示当前promise执行完，而index是在外层的，所以用index判断会输出有问题 

    5.完整代码

    1.  /*
    2.         实现功能：
    3.             有一个Promise构造函数，传入resolve和reject两个参数，是两个可以执行的函数
    4.             promise有三种状态：pending等待，fulfilled成功，rejected失败
    5.             状态pending 一旦转为fulfilled或者rejected，不能再更改
    6.             resolve()方法为成功处理方法，将状态由pending转为fulfilled，且传入参数value
    7.             reject()方法为失败处理方法，将状态由pending转为rejected，且传入参数reason
    8.             then()方法接受两个参数，分别为onFulfilled和onRejected函数，当状态由pending转为fulfilled后执行onFulfilled函数，由pending转为rejected后指向onRejected函数
    9.             .then()方法支持链式调用，创建Promise实例后，可以通过实例一直调用.then()方法触发
    10.             静态方法的实现：Promise.resolve()，Promise.reject()，Promise.all()
    11.         基本步骤：
    12.             需要创建一个Promise类，并且添加一个回调方法 callback，作为Promise 的参数
    13.             callback接收resolve 和 reject 作为参数
    14.             定义promise的三种状态，实现then方法
    15.             then()方法可实现异步操作(用定时器进行测试)
    16.             实现链式调用
    17.             添加静态方法
    18.         */
    19.         // 问题：写在constructor里面的函数和写在constructor外的函数区别
    20.         // constructor里面的函数，通过构造方法创建时就必须传入回调函数
    21.         class MPromise {
    22.             constructor(callback) {
    23.                 // 定义成功返回参数。为什在构造器里面定义？
    24.                 this.value = undefined;
    25.                 // 定义失败返回参数
    26.                 this.reason = undefined;
    27.  
    28.                 // 定义promise的初始状态pending(后面两个状态在执行对应函数后进行更改)
    29.                 this.state = 'pending';
    30.  
    31.                 // 设置数组用于存放异步队列中所有的resolve和reject函数
    32.                 this.onResolveCallback = [];
    33.                 this.onRejectCallback = [];
    34.  
    35.                 // 定义两个处理函数
    36.                 const resolve = (value) => {
    37.                     this.value = value;
    38.                     if (this.state === 'pending') {
    39.                         this.state = 'fulfilled';
    40.                     }
    41.                     if (this.state === 'fulfilled') {
    42.                         this.onResolveCallback.forEach(resolveCb => resolveCb(this.value));
    43.                     }
    44.                 }
    45.  
    46.                 const reject = (reason) => {
    47.                     this.reason = reason;
    48.                     if (this.state === 'pending') {
    49.                         this.state = 'rejected';
    50.                     }
    51.                     if (this.state === 'rejected') {
    52.                         this.onRejectCallback.forEach(rejectCb => rejectCb(this.reason));
    53.                     }
    54.                 }
    55.  
    56.                 // 执行回调函数(对传入非function的进行处理)
    57.                 typeof callback === 'function'? callback(resolve, reject): resolve(callback);
    58.             }
    59.             // then方法时MPromise创建的实例调用的所以在constructor外
    60.             // then()方法会接受两个函数参数（onFulfilled和onRejected）
    61.             then(onFulfilled, onRejected) {
    62.                 return new MPromise((resolve, reject) => {
    63.                     // 容错：onFulfilled,onRejected存在且为function时才能进行调用
    64.                     let onFulfilledState = onFulfilled ? typeof onFulfilled === 'function' : true; //判断如果onFulfilled传入了则继续判断是否为function函数，否则直接返回true传入什么返回什么
    65.                     let onRejectedState = onRejected ? typeof onRejected === 'function' : true;
    66.                     if (onFulfilledState && onRejectedState) {
    67.  
    68.                         // 根据对应状态调用不同的处理函数
    69.                         if (this.state === 'fulfilled') {
    70.                             resolve(onFulfilled(this.value));
    71.                         }
    72.  
    73.                         if (this.state === 'rejected') {
    74.                             reject(onRejected(this.value));
    75.                         }
    76.                         // 当异步执行时，状态会一直为pending
    77.                         if (this.state === 'pending') {
    78.                             // push进去的是下一次resolve函数
    79.                             this.onResolveCallback.push(() => resolve(onFulfilled(this.value)));
    80.                             this.onRejectCallback.push(() => resolve(onRejected(this.reason)));
    81.                         }
    82.                     }
    83.                 });
    84.             }
    85.  
    86.             // 其实就是单独调用new MPromise里面的resolve方法
    87.             static resolve = (value) => new MPromise((resolve, reject) => resolve(value));
    88.             static reject = (reason) => new MPromise((resolve, reject) => resolve(reason));
    89.  
    90.             // 关键是需要在循环中调用promise.then()方法向下执行，最后判断数组中所有promise执行完后，通过resolve返回结果
    91.             static all = (promiseArr) => new MPromise((resolve, reject)=>{
    92.                 // 使用数组存放所有MPromise传入的参数数据
    93.                 let results = [];
    94.                 // 使用count记录处理的MPromise，每处理一个+1，直到最后一个处理完就返回参数数组
    95.                 let count = 0;
    96.                 promiseArr.forEach((promise,index)=>{
    97.                     promise.then(item=>{
    98.                         results[index] = item;
    99.                         count++;
    100.                         console.log(promise.value);
    101.                         // 注意此处用数组下标判断会出现问题：setTimeout()异步的会等results其他输出后第二次输出
    102.                         if(count === promiseArr.length){
    103.                             resolve(results);
    104.                         }
    105.                     });
    106.                     
    107.                 });
    108.             })
    109.         }
    110.  
    111.         // // MPromise类调用
    112.         // let p = new MPromise((resolve, reject) => {
    113.         //     setTimeout(function () {
    114.         //         resolve("success");
    115.         //         // reject("error");
    116.         //     }, 1000)
    117.         // });
    118.         // p.then((data) => {
    119.         //     console.log(data);
    120.         //     return data
    121.         // },err=>{
    122.         //     console.log(err);
    123.         // }).then((data)=>{
    124.         //     console.log("第二次调用then",data);
    125.  
    126.         // })
    127.  
    128.         // MPromise.resolve("这是静态方法MPromise.resolve调用").then((data)=>{
    129.         //     console.log(data);
    130.         //     return data;
    131.         // }).then(data=>{
    132.         //     console.log("第二次调用静态方法MPromise.resolve调用",data);
    133.  
    134.         // })
    135.         // MPromise.reject("这是静态方法MPromise.reject调用").then((error)=>{
    136.         //     console.log(error);
    137.         // })
    138.  
    139.         let p1 = new MPromise(1);
    140.         let p2 = new MPromise((resolve, reject) => {
    141.             setTimeout(function(){
    142.                 resolve("p2");
    143.             }, 2000);
    144.         })
    145.         let p3 = new MPromise((resolve, reject) => {
    146.             resolve("p3");
    147.         })
    148.         let p4 = new MPromise((resolve, reject) => {
    149.             resolve("p4");
    150.         })
    151.  
    152.         MPromise.all([p1, p2, p3, p4]).then(result => {
    153.             console.log(result);
    154.         });
    155.  
    156.  
    157.         // // Promise类调用
    158.         // let p = new Promise((resolve, reject) => {
    159.         //     // 执行resolve或者reject函数,并传入参数
    160.         //    setTimeout(function (){
    161.         //         resolve("success");
    162.         //    },1000)
    163.         // });
    164.         // p.then((data) => {
    165.         //     console.log(data);
    166.         // })

  • 相关阅读:
    分布式解决方案 Percolator--详解
    JavaScript学习总结
    【面试题精讲】Java成员变量与局部变量的区别？
    MySQL函数count
    国网云（华为组件）使用
    Docker出现容器名称重复如何解决
    Fix Xcode14 bundle need sign
    前后端分离项目，vue+uni-app+php+mysql在线小说电子书阅读小程序系统 开题报告
    以 Golang 为例详解 AST 抽象语法树
    浅谈城市综合管廊分类及其运维管理-Susie 周
  • 原文地址：https://blog.csdn.net/qq_34569497/article/details/133906250