实习期间，还不把promise搞懂点？

最新推荐文章于 2024-06-11 11:33:08 发布
最新推荐文章于 2024-06-11 11:33:08 发布
阅读量792 收藏 5
点赞数 5
分类专栏： 前端知识点积累 文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53273706/article/details/115644534
版权

目录

目录

一.promise是什么？

1.1promise理解

1.2使用promise的优点

1.4promise初体验（用promise做一个类似于抽奖的东西）

 二.promise的状态以及对象的值

2.1promise的三种状态

2.2promise的状态的改变

2.3promise对象的值——实例对象中的另外一个属性promiseResult

三.如何使用Promise

3.1API

3.1.1Promise的构造函数：Promise(excutor){}

3.1.2Promise.prototype.then方法：（onResolved,onRejected）=>{}

3.1.3Promise.prototype.catch方法：（onRejected）=>{}

3.2promise的几个关键问题

3.2.1promise.resolve方法：（value）=>{}

3.2.2promise.reject方法:(reason)=>{}

3.2.3Promise.all方法;(promises)=>{}

3.2.4Promise.race方法：(promises)=>{}

3.2.5一个promise指定多个成功/失败回调函数，调用问题

3.2.6promise.then()返回的新的promise对象由什么决定

3.2.7promise异常穿透

3.2.8中断promise链

四.Promise的自定义封装

4.1promise自定义封装-实现核心逻辑

4.2promise自定义封装-添加异步逻辑

4.3promise自定义封装-then的多次调用

4.4promise自定义封装-then的链式调用

4.5promise自定义封装-then的陷入死循环

4.6promise自定义封装-错误处理

4.7promise自定义封装-then的参数可选

一.promise是什么？

1.1promise理解

抽象表达：promise是一门新的技术（ES6规范），是js中进行异步编程的新解决方案（旧方案是使用回调函数）

异步编程种类：fs文件操作，AJAX，定时器

具体表达：从语法上说是一个构造函数，从功能上说promise对象用来封装一个异步操作并可以取得成功/失败的结果值

1.2使用promise的优点

指定回调函数的方式更加灵活（promise:启动异步任务=>返回promise对象=>给promise对象绑定回调函数）

    <script>
        let p=new Promise((resolve,reject)=>{
            resolve('ok');
        });
        p.then(value=>{
            console.log(value);
        },reason=>{
            console.log(reason);
        })
    </script>

1.4promise初体验（用promise做一个类似于抽奖的东西）


    <div class="container">
        <h2 class="page-header">promise初体验</h2>
        <button class="btn btn-primary" id="btn">点击抽奖</button>
    </div>
    <script>
        //生成随机数
        function rand(mim,max){
            return Math.ceil(Math.random()*(max-min+1)+min-1);
        }
        //点击按钮，两秒后显示是否中奖
        //如果中奖，弹出恭喜
        //若未中奖，弹出再接再厉

        //获取元素对象
        const btn=document.querySelector('#btn');
        //绑定单击事件
        btn.addEventListener('click',function(){
           
        //promise形式实现
        const p=new Promise((resolve,reject)=>{
            setTimeout(()=>{
               //获取1-100的随机数
                let n=rand(1,100);
               //判断
                if(n<=30){
                    resolve();
                 }else{
                     reject();
                 }
            },1000)
        });
        console.log(p);

        //调用then方法
        p.then(()=>{
           //promise状态为resolved执行下列代码
           alert('恭喜你获得劳斯莱斯五万元优惠券');
        },()=>{
            //promise状态为rejected执行下列代码
            alert('努力，继续抽，加油');
        })
    });
    </script>

 二.promise的状态以及对象的值

2.1promise的三种状态

promise的状态其实是实例对象中的一个内置属性(PromiseState)，所以不能够对该属性做直接的操作

  • 1.pending未定的状态
  • 2.fullfilled/resolved
  • 3.rejected
 <script>
        let p=new Promise((resolve,reject)=>{
            //此时promise状态为fullfilled
            //要是判断reject状态也是同理
            resolve('ok');
        })
        //此时控制台的输出结果中可以看到promiseState的值为fullfilled
        console.log(p);
 </script>

2.2promise的状态的改变

只有两种情况，且一个promise对象只能改变一次，不能由成功变失败，也不能失败变成功

  • pending->resolved
  • pending->rejected

 成功的结果数据一般称为value,失败的结果一般称为reason

2.3promise对象的值——实例对象中的另外一个属性promiseResult

该值保存了异步任务成功/失败的结果

其结果由resolve和reject执行获得

三.如何使用Promise

3.1API

3.1.1Promise的构造函数：Promise(excutor){}

  • excutor函数:执行器(resolve,reject)=>{}
  • resolve函数：内部定义成功时我们调用的函数value=>{}
  • reject函数：内部定义失败时我们调用的函数reason=>{}

说明：executor会在promise内部立即同步调用，异步操作在执行器中执行

废话不多说，上示例代码：

 <script>
        let p=new Promise((resolve,reject)=>{
            console.log(111);
        })
        console.log(222);
 </script>
//输出结果为：
//111
//222

3.1.2Promise.prototype.then方法：（onResolved,onRejected）=>{}

  • onResolved函数：成功的回调函数(value)=>{}
  • onRejected函数：失败的回调函数(reason)=>{}
    <script>
        let p=new Promise((resolve,reject)=>{
            let i=1;
            if(i==1)
            resolve("heihei");
            else
            reject("no");
        });
        p.then(value=>{
            console.log(value);
        },reason=>{
            console.log(reason);
        })
    </script>
    //结果为heihei

3.1.3Promise.prototype.catch方法：（onRejected）=>{}

  • onRejected函数：失败的回调函数(reason)=>{}
    <script>
        let p=new Promise((resolve,reject)=>{
            let i=2;
            if(i==1)
            resolve("heihei");
            else
            reject("no");
        });
        //使用catch
        p.catch(reason=>{
            console.log(reason);
        })
    </script>
         //控制台输出结果为no

3.2promise的几个关键问题

3.2.1promise.resolve方法：（value）=>{}

value:成功的数据或promise对象

说明：返回一个成功/失败的promise对象

<script>
        //Promise.resolve
        //如果传入的参数为非promise对象，则返回的结果为成功的promise对象
          let p1=Promise.resolve(521);
          console.log(p1);
        //此时输出的是一个promise对象，promiseresult为521，promisestate为fullfilled


        //如果传入的参数为promise对象，则参数的结果决定了resolve的结果
          let p2=Promise.resolve(new Promise((resolve,reject)=>{
              reject('error');
          }))

          //此示例输出的结果为一个失败的promise对象
          console.log(p2);
          //因为是一个失败的promise对象，所以使用catch将其抓捕，否则报错
          p2.catch(reason=>{
              console.log(reason);
          })
</script>

3.2.2promise.reject方法:(reason)=>{}

reason:失败的原因

说明：返回一个失败的promise对象

<script>
          //和promise.resolve类似，如果其传入的参数是一个非promise对象，则它的promiseresult为该参数，如果是一个promise对象，则promiseresult为一个promise对象
          let p1=Promise.reject(521);
          console.log(p1);

          //调用了该reject方法，即使参数是一个成功的promise对象也依旧返回一个失败的promise对象
          let p2=Promise.reject(new Promise((resolve,reject)=>{
              resolve('ok');
          }))
              console.log(p2);

</script>

3.2.3Promise.all方法;(promises)=>{}

promises:包含n个promise的数组

说明：返回一个新的promise对象，只有数组中的所有promise成功才成功

<script>
        let p1=new Promise((resolve,reject)=>{
            resolve('ok');
        })
        let p2=Promise.resolve('ok2');
        let p3=Promise.resolve('ok3');
        const result=Promise.all([p1,p2,p3]);
        
        //下列输出结果是一个成功的promise对象，promiseresult的值为一个数组
        console.log(result);
</script>

3.2.4Promise.race方法：(promises)=>{}

promises:包含n个promise的数组

说明：返回一个新的promise对象，第一个完成的promise的结果状态就是最终状态

<script>

        //p1使用了定时器，所以不是p1第一个完成状态改变
        let p1=new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('ok');
            },1000)
        })
        let p2=Promise.resolve('Success');
        let p3=Promise.resolve('ok');
        const result=Promise.race([p1,p2,p3]);

        //下列的输出结果是promise对象，promiseresult为success
        console.log(result);
</script>

3.2.5一个promise指定多个成功/失败回调函数，调用问题

（当promise改变对应状态时都会调用）

   <script>      
         //promise能否执行多个回调函数
         let p=new Promise((resolve,reject)=>{
             resolve("相应状态的都会调用");
         })
         p.then((value)=>{
             alert('OK');
         })
         p.then((value)=>{
            console.log("ok");
         })
  </script>

3.2.6promise.then()返回的新的promise对象由什么决定

由它的回调函数的返回值决定，如果是一个promise对象，则其根据状态返回结果，如果是非promise对象，则。。

<script>
          let p=new Promise((resolve,reject)=>{
             setTimeout(()=>{
                 resolve('ok');
             },1000);
          });
          p.then(value=>{
              return new Promise((resolve,reject)=>{
                  resolve('success');
              }).then(value=>{
                  //返回一个成功的promise对象，所以下列输出结果为：success
                console.log(value);
              }).then(value=>{
                  //上一行的返回时success字符串，所以下列输出结果是undefined
                console.log(value);
              })
          },reason=>{
          })
</script>

3.2.7promise异常穿透

<script>
       //异常穿透,在最后面来一个catch则不用管中间执行过程中是否出现失败的情况
        let p=new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('ok');
            },1000);
        });
        p.then(value=>{
            console.log(111);
        }).then(value=>{
            console.log(222);
        }).then(value=>{
            console.log(333);
        }).catch(reason=>{
            console.log(reason);
        })

</script>

3.2.8中断promise链

<script>
        //中断promise链，返回一个pending状态的promise对象即可
        let p=new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('ok');
            },1000);
        });

    
        p.then(value=>{
            console.log(111);
            return new Promise(()=>{});
        }).then(value=>{
            console.log(222);
        }).then(value=>{
            console.log(333);
        }).catch(reason=>{
            console.log(reason);
        })
</script>

四.Promise的自定义封装

4.1promise自定义封装-实现核心逻辑

// promise的基本原理：
// 1.Promise是一个类,在执行这个类的时候会传入一个执行器，这个执行器会立即执行
// 2.Promise会有三种状态
//     Pending 等待
//     Fulfilled 完成
//     Rejected 失败
// 3.状态一旦发生改变，那么便不可以进行对二次修改
// 4.Promise中使用resolve和reject两个函数来更改状态
// 5.then方法内部做的事情是根据状态来判断
//     如果状态是成功，调用成功回调函数
//     如果状态是失败，调用失败回调函数

//第2实现：状态与结果的管理，先定义三个常量表示状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = 'rejected'

// 第1实现：新建myPromise类，传入执行器executor
class MyPromise {
    // constructor: 构造器，executor: 执行器
    constructor(executor) {
        //executor是一个执行器， 进入会立即执行
        //第1.2实现：传入resolve和reject方法
        executor(this.resolve,this.reject);
    }
    // 储存状态的变量， 初始值是pending
    status = PENDING;

    // 成功后的值
    value = null;
    // 失败之后的原因
    reason = null;

    // 第4实现：resolve和reject两个函数来改变状态
    // resolve和reject为什么要使用箭头函数: 因为如果直接调用的话，普通函数this指向windows或undefined,用箭头函数就可以让this指向当前实例对象
    // 更改成功后的状态
    resolve = (value) => {
        // 第3实现：
        // 只有状态是等待， 才执行状态修改
        if (this.status == PENDING) {
            // 状态修改为成功
            this.status = FULFILLED;
            // 保存成功之后的值
            this.value = value;
        }
    }
    // 更改失败后的状态
    reject = (reason) => {
        // 只有状态是等待， 才执行状态修改
        if (this.status == PENDING) {
            // 状态修改为失败
            this.status = REJECTED;
            // 保存失败后的原因
            this.reason = reason;
        }
    }

    // 第5实现：then的简单实现
    then(onFulfilled, onRejected) {
        // 判断状态
        if(this.status == FULFILLED) {
            // 调用成功回调，并且把值返回
            onFulfilled(this.value);
        }else if(this.status == REJECTED) {
            // 调用失败回调， 并且把原因返回
            onRejected(this.reason);
        }
    }
}
module.exports = MyPromise;

4.2promise自定义封装-添加异步逻辑

// Promise类中加入异步逻辑
// 1.缓存成功与失败回调
// 2.then方法中的Pending的处理  （异步操作时，此时then中的状态依旧是pending）
// 3.resolve和reject中调用回调函数
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = 'rejected'

class MyPromise {
    // constructor: 构造器，executor: 执行器
    constructor(executor) {
        executor(this.resolve,this.reject);
    }

    status = PENDING;
    value = null;
    reason = null;
    // 第1步实现： 缓存成功和失败回调
    onFulfilledCallback = null;
    onRejectedCallback = null;

    // 更改状态
    resolve = (value) => {
        if (this.status == PENDING) {
            this.status = FULFILLED;
            this.value = value;
            // 如果成功后回调存在，就进行调用
            this.onFulfilledCallback && this.onFulfilledCallback(value);
        }
    }
    reject = (reason) => {
        if (this.status == PENDING) {
            this.status = REJECTED;
            this.reason = reason;
            this.onRejectedCallback && this.onRejectedCallback(reason);
        }
    }

    // 第2步实现： then方法中的Pending处理
    then(onFulfilled, onRejected) {
        if(this.status == FULFILLED) {
            onFulfilled(this.value);
        }else if(this.status == REJECTED) {
            onRejected(this.reason);
        }else if(this.status == PENDING) {
            // 新增：因为不知道后面状态的变化情况， 所以将成功回调和失败回调存储起来
            this.onFulfilledCallback = onFulfilled;
            this.onRejectedCallback = onRejected;
        }
    }
}


module.exports = MyPromise;

4.3promise自定义封装-then的多次调用

// 实现then方法可以多次调用

// 1.将回调函数存储起来，如果是异步回调，返回的值都是需要存储起来的（新增两个数组）
// 2.回调函数存入数组当中
// 3.循环调用成功和失败回调

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = 'rejected';

class MyPromise {
    // constructor: 构造器，executor: 执行器
    constructor(executor) {
        executor(this.resolve,this.reject);
    }

    status = PENDING;
    value = null;
    reason = null;
    // 第1步实现： 
    onFulfilledCallbacks = [];
    onRejectedCallbacks = [];

    // 更改状态
    resolve = (value) => {
        if (this.status == PENDING) {
            this.status = FULFILLED;
            this.value = value;
            // 第3步实现
            // 如果成功后回调存在，就进行调用
            // this.onFulfilledCallback && this.onFulfilledCallback(value);
            while (this.onFulfilledCallbacks.length) {
                this.onFulfilledCallbacks.shift()(value);
            }
        }
    }
    reject = (reason) => {
        if (this.status == PENDING) {
            this.status = REJECTED;
            this.reason = reason;
            // this.onRejectedCallback && this.onRejectedCallback(reason);
            while(this.onRejectedCallbacks.length) {
                this.onRejectedCallbacks.shift()(reason);
            }
        }
    }
    then(onFulfilled, onRejected) {
        if(this.status == FULFILLED) {
            onFulfilled(this.value);
        }else if(this.status == REJECTED) {
            onRejected(this.reason);
        }else if(this.status == PENDING) {
            // 等待后续调用
            // 第2步实现
            this.onFulfilledCallbacks.push(onFulfilled);
            this.onRejectedCallbacks.push(onRejected);
        }
    }
}


module.exports = MyPromise;

4.4promise自定义封装-then的链式调用

// 实现then的链式调用
// 1. 需要一个变量，将then中返回的值保存起来
// 2. 返回一个promise对象，使得其可以继续调用


const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = 'rejected';

class MyPromise {
    // constructor: 构造器，executor: 执行器
    constructor(executor) {
        executor(this.resolve,this.reject);
    }

    status = PENDING;
    value = null;
    reason = null;
    onFulfilledCallbacks = [];
    onRejectedCallbacks = [];

    resolve = (value) => {
        if (this.status == PENDING) {
            this.status = FULFILLED;
            this.value = value;
            // 如果成功后回调存在，就进行调用
            // this.onFulfilledCallback && this.onFulfilledCallback(value);
            while (this.onFulfilledCallbacks.length) {
                this.onFulfilledCallbacks.shift()(value);
            }
        }
    }
    reject = (reason) => {
        if (this.status == PENDING) {
            this.status = REJECTED;
            this.reason = reason;
            // this.onRejectedCallback && this.onRejectedCallback(reason);
            while(this.onRejectedCallbacks.length) {
                this.onRejectedCallbacks.shift()(reason);
            }
        }
    }
    then(onFulfilled, onRejected) {
        // 2.为了链式调用， 这里直接创建一个promise对象， 最后return出去
        const promise2 = new MyPromise((resolve,reject) => {
            if(this.status == FULFILLED) {
                // 如果成功， 则需要继续返回值和调用
                // 1. 将结果保存起来
                const x = onFulfilled(this.value);
                // 传入 resolvePromise 集中处理
                resolvePromise(x, resolve, reject);
            }else if(this.status == REJECTED) {
                onRejected(this.reason);
            }else if(this.status == PENDING) {
                // 等待后续调用
                // 第2步实现
                this.onFulfilledCallbacks.push(onFulfilled);
                this.onRejectedCallbacks.push(onRejected);
            }
        })
        return promise2;
    }
}
function resolvePromise(x, resolve, reject) {
    if(x instanceof MyPromise) {
        // 执行x, 调用then方法
        x.then(resolve,reject);
    }else {
        // 普通值
        resolve(x);
    }
}


module.exports = MyPromise;

4.5promise自定义封装-then的陷入死循环

// 防止then链式调用陷入死循环（then链式调用return一个本身，造成死循环）
// 1.在then链式调用传入的值中多传一个值，用来判断是否返回本身

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = 'rejected';

class MyPromise {
    // constructor: 构造器，executor: 执行器
    constructor(executor) {
        executor(this.resolve,this.reject);
    }

    status = PENDING;
    value = null;
    reason = null;
    onFulfilledCallbacks = [];
    onRejectedCallbacks = [];

    resolve = (value) => {
        if (this.status == PENDING) {
            this.status = FULFILLED;
            this.value = value;
            // 如果成功后回调存在，就进行调用
            // this.onFulfilledCallback && this.onFulfilledCallback(value);
            while (this.onFulfilledCallbacks.length) {
                this.onFulfilledCallbacks.shift()(value);
            }
        }
    }
    reject = (reason) => {
        if (this.status == PENDING) {
            this.status = REJECTED;
            this.reason = reason;
            // this.onRejectedCallback && this.onRejectedCallback(reason);
            while(this.onRejectedCallbacks.length) {
                this.onRejectedCallbacks.shift()(reason);
            }
        }
    }
    then(onFulfilled, onRejected) {
        // 为了链式调用， 这里直接创建一个promise对象， 最后return出去
        const promise2 = new MyPromise((resolve,reject) => {
            if(this.status == FULFILLED) {
                // 创建一个微任务， 等待promise2的初始化，否则会直接将promise2传入，但此时promise2并没有return/创建完成
                queueMicrotask(() => {
                    // 获取成功回调函数的执行结果
                    const x = onFulfilled(this.value);
                    // 传入 resolvePromise 集中处理
                    resolvePromise(promise2, x, resolve, reject);
                })  
            }else if(this.status == REJECTED) {
                onRejected(this.reason);
            }else if(this.status == PENDING) {
                // 等待后续调用
                // 第2步实现
                this.onFulfilledCallbacks.push(onFulfilled);
                this.onRejectedCallbacks.push(onRejected);
            }
        })
        return promise2;
    }
}
function resolvePromise(promise2, x, resolve, reject) {
    // 多加一重判断， 是否为本身
    if(promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if(x instanceof MyPromise) {
        // 执行x, 调用then方法
        x.then(resolve,reject);
    }else {
        // 普通值
        resolve(x);
    }
}


module.exports = MyPromise;

4.6promise自定义封装-错误处理

// 参考fulfilled状态下的处理方式，对reject和pending状态进行改造

// 1.增加异步状态的链式调用
// 2.增加回调函数执行结果的判断
// 3.增加错误捕捉


const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = 'rejected';

class MyPromise {
    // 1：错误处理机制
    constructor(executor) {
        try{
            executor(this.resolve,this.reject);
        }catch(error) {
            this.reject(error);
        }
    }

    status = PENDING;
    value = null;
    reason = null;
    onFulfilledCallbacks = [];
    onRejectedCallbacks = [];

    resolve = (value) => {
        if (this.status == PENDING) {
            this.status = FULFILLED;
            this.value = value;
            // 如果成功后回调存在，就进行调用
            // this.onFulfilledCallback && this.onFulfilledCallback(value);
            while (this.onFulfilledCallbacks.length) {
                this.onFulfilledCallbacks.shift()(value);
            }
        }
    }
    reject = (reason) => {
        if (this.status == PENDING) {
            this.status = REJECTED;
            this.reason = reason;
            // this.onRejectedCallback && this.onRejectedCallback(reason);
            while(this.onRejectedCallbacks.length) {
                this.onRejectedCallbacks.shift()(reason);
            }
        }
    }
    then(onFulfilled, onRejected) {
        const promise2 = new MyPromise((resolve,reject) => {
            if(this.status == FULFILLED) {
                queueMicrotask(() => {
                    try {
                        const x = onFulfilled(this.value);
                        resolvePromise(promise2, x, resolve, reject);
                    }catch(error) {
                        reject(error);
                    }
                })  
            }else if(this.status == REJECTED) {
                //  添加链式调用
                queueMicrotask(() => {
                    try {
                        const x = onRejected(this.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    }catch(error) {
                        reject(error);
                    }
                })
                onRejected(this.reason);
            }else if(this.status == PENDING) {
                this.onFulfilledCallbacks.push(() => {
                    queueMicrotask(() => {
                        try {
                          // 获取成功回调函数的执行结果
                          const x = onFulfilled(this.value);
                          // 传入 resolvePromise 集中处理
                          resolvePromise(promise2, x, resolve, reject);
                        } catch (error) {
                          reject(error)
                        } 
                    }) 
                })
                this.onRejectedCallbacks.push(() => {
                    queueMicrotask(() => {
                        try {
                          // 获取成功回调函数的执行结果
                          const x = onRejected(this.reason);
                          // 传入 resolvePromise 集中处理
                          resolvePromise(promise2, x, resolve, reject);
                        } catch (error) {
                          reject(error)
                        } 
                    }) 
                })
            }
        })
        return promise2;
    }
}
function resolvePromise(promise2,x, resolve, reject) {
    if(promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if(x instanceof MyPromise) {
        x.then(resolve,reject);
    }else {
        resolve(x);
    }
}
module.exports = MyPromise;

4.7promise自定义封装-then的参数可选

// 1.then中的参数变为可选


const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = 'rejected';

class MyPromise {
    // 1：错误处理机制
    constructor(executor) {
        try{
            executor(this.resolve,this.reject);
        }catch(error) {
            this.reject(error);
        }
    }

    status = PENDING;
    value = null;
    reason = null;
    onFulfilledCallbacks = [];
    onRejectedCallbacks = [];

    resolve = (value) => {
        if (this.status == PENDING) {
            this.status = FULFILLED;
            this.value = value;
            // 如果成功后回调存在，就进行调用
            // this.onFulfilledCallback && this.onFulfilledCallback(value);
            while (this.onFulfilledCallbacks.length) {
                this.onFulfilledCallbacks.shift()(value);
            }
        }
    }
    reject = (reason) => {
        if (this.status == PENDING) {
            this.status = REJECTED;
            this.reason = reason;
            // this.onRejectedCallback && this.onRejectedCallback(reason);
            while(this.onRejectedCallbacks.length) {
                this.onRejectedCallbacks.shift()(reason);
            }
        }
    }
    // then需要实现1-能多次调用（数组存值），2-链式调用（promise）,3-参数可选（typeof）
    then(onFulfilled, onRejected) {
        // 第1步实现：then中的参数变为可选 (如果不传， 就是使用默认函数)
        onFulfilled = typeof onFulfilled === 'function'? onFulfilled : value => value;
        onRejected = typeof onRejected === 'funciton'? onRejected : reason => { throw reason };
        const promise2 = new MyPromise((resolve,reject) => {
            if(this.status == FULFILLED) {
                // 链式调用中实现1-不能返回自己（将自己也传过去），2-
                queueMicrotask(() => {
                    try {
                        const x = onFulfilled(this.value);
                        resolvePromise(promise2, x, resolve, reject);
                    }catch(error) {
                        reject(error);
                    }
                })  
            }else if(this.status == REJECTED) {
                //  添加链式调用
                queueMicrotask(() => {
                    try {
                        const x = onRejected(this.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    }catch(error) {
                        reject(error);
                    }
                })
            }else if(this.status == PENDING) {
                this.onFulfilledCallbacks.push(() => {
                    queueMicrotask(() => {
                        try {
                          // 获取成功回调函数的执行结果
                          const x = onFulfilled(this.value);
                          // 传入 resolvePromise 集中处理
                          resolvePromise(promise2, x, resolve, reject);
                        } catch (error) {
                          reject(error)
                        } 
                    }) 
                })
                this.onRejectedCallbacks.push(() => {
                    queueMicrotask(() => {
                        try {
                          // 获取成功回调函数的执行结果
                          const x = onRejected(this.reason);
                          // 传入 resolvePromise 集中处理
                          resolvePromise(promise2, x, resolve, reject);
                        } catch (error) {
                          reject(error)
                        } 
                    }) 
                })
            }
        })
        return promise2;
    }
}
function resolvePromise(promise2, x, resolve, reject) {
    if(promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if(x instanceof MyPromise) {
        x.then(resolve,reject);
    }else {
        resolve(x);
    }
}
module.exports = MyPromise;

【春招&实习&秋招】前端学习の优质资料整理&心路历程（已上岸）
超逸の学习技术博客
06-29 7624
引言 CSS篇 JS篇 追梦子：彻底理解 JS 中 this 的指向 追梦子：JavaScript中call,apply,bind方法的总结 计算机网络篇 神三元：(建议精读）HTTP灵魂之问，巩固你的 HTTP 知识体系 神三元：(建议收藏）TCP协议灵魂之问，巩固你的网路底层基础 浏览器篇 神三元：(1.6w字）浏览器灵魂之问，请问你能接得住几个？ 数据结构与算法篇 awesome-coding-js：用JS玩转数据结构与算法 ConardLi：前端该如何准备数据结构和算法？ 源码篇 心路历程 / 大佬
前端实习面试经验汇总
InDoKer的博客
04-16 3408
前端面试题汇总（不定期更新） 第一波前端面试比想象中问的面比较小，主要集中在js，尤其是es6的一些特性上，还有就是项目经验，项目中展开的问题。可能是这些公司对实习生要求没那么高？这次没有问到网络相关的，比如tcp、http啥的，不过感觉以后不会这么简单。 有鱼（一面挂） 1.promise和settimeout 笔试，面试都有问到 主要是给一道带有promise和settimeout方法的程序题，手写输出的顺序，当时给我的是这道题 Promise.resolve().then(
Promise学习之路（三）：Promise实例对象的状态属性与结果属性
孙悟空
02-20 1657
本文主要讲述了Promise的状态属性（三种状态、状态变化路径、settled状态等）及其结果值，最后给出代码示例。
简单明了的Promise基本知识点
chenweiqiang77的博客
07-28 1146
Promise相比大家都不陌生，都能说出几个状态几个方法，可是你真的了解Promise吗？本文将带领大家一探究竟。
ES6 Promise（承诺）看这一篇就够了
^_^
08-03 9156
一、什么是promise 我们通常都会去 new 一个Promise，什么东西可以new啊? 是不是构造函数可以new， 通过控制台dir一下Promise 通过上面的输出，你可以知道promise是一个构造函数，而上面常见的几个方法，resolve、reject、catch、resolve 你不需要立即知道它是干嘛的，接下来 听鹅说 Promise是Es6新增的构造器，用来提优化异步代码的写法，Promise中文意为承诺，承诺它一段时间后返回给你最终的结果。 首先了解三个状态，用...
Promise
qq_56088882的博客
07-29 2516
Promise是JS中进行异步编程的新解决方案（备注旧方案是单纯使用回调函数）promise对象用来封装一个异步操作并可以获取其成功/失败的结果值。
前端面试问题（适用于面试回答思路）
yaminne的博客
03-28 5104
原型和原型链 原型：构造函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。也即，每个构造函数的实例都有一个原型，叫原型对象，由实例对象的内置属性_proto_指向。每个原型都有一个 constructor 属性指向关联的构造函数。 原型用法：构造函数创建的实例可以访问实例的属性和方法，也可以访问原型的属性和方法。对于原型只能访问自己的属性和方法。考虑这一特性，如果对象公有的属性和方法，我们可以添加到原型上面，对象需要的时候直接访问原型的属性和方法就可以。 当读取实
面试分享：两年工作经验成功面试阿里P6总结
weixin_45556713的博客
09-12 6069
前言 本文主要给大家带来一些我面试的经历和经验，希望对正在求职的同学有所帮助。我先大致说下面试之前的个人情况：2017年7月正式入职海康威视数字技术股份有限公司，使用Vue.js技术栈。 我写的篇幅可能有点长，如果只想看成功的面试请直接从阿里企业智能事业部（一面）开始，大家见谅哈。 这里推荐阅读之前写的文章（前面两篇实用型，后面两篇对面试应该会有帮助）： Vue CLI 3结合Lerna进行UI框...
简历资料
刘群智的博客
07-27 1926
专业技能 1.移动端前端开发，PC端前端开发 　　在阿里的几次面试中，总是被问到移动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局 等方面的不同，但是还是很不系统，所以这里做一个总结。 第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机， 一般浏览器使用的都是webkit内核，所以说做移...
通俗易懂的Promise知识点总结，检验一下你是否真的完全掌握了promise？
圆圆的 JavaScript 博客
10-18 2377
Promise 想必大家都十分熟悉，想想就那么几个 api，可是你真的了解 Promise 吗？
Promise常见的几个关键问题
m0_46439244的博客
09-21 626
promise常见的几个关键问题
Promise 知识点
weixin_48772566的博客
07-17 208
1)promise的then()返回一个新的promise,可以开成then()的链式调用。说明返回一个新的promise,第一个完成的promise的结果状态就是最终的结果状态。说明then()的语法糖,相当于then(undefined,onRejected)(1)当使用promise的then链式调用时,在中间中断,不再调用后面的回调函数。(1)onRejected函数失败的回调函数(reason)=>{}...
Promise 知识点总结
最新发布
2402_85402030的博客
06-11 371
Promise案例分析模拟事件循环原文链接：https://juejin.cn/post/7377581109154938907。
Promise知识点整理
qq_45906429的博客
06-19 510
1、概述：Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，可以获取异步操作的消息 2、目的： （1）、避免回调地狱的问题（2）、Promise对象提供了简洁的API，使得控制异步操作更加容易 3、Promise有三种状态：pendding //正在请求，rejected //失败，resolved //成功 4、基础用法：new Promise(function(resolve,reject){ }) 5、resolved,rejected函数：在异步事件状态pendding-
Promise异步编程的应用
冰的博客
06-29 70
如果传入的可迭代对象中的任何一个 Promise 对象处于已拒绝状态，则 Promise.all 返回的 Promise 对象会立即处于已拒绝状态，并且它的拒绝原因是第一个被拒绝的 Promise 对象的拒绝原因。如果传入的可迭代对象中的所有 Promise 对象都处于已解决状态，则 Promise.all 返回的 Promise 对象也会处于已解决状态，并且它的值是一个与传入的 Promise 对象顺序相对应的值数组。每个异步操作的回调函数需要嵌套在前一个异步操作的回调函数中，使得代码结构变得复杂。
Promise详解与使用
weixin_71258678的博客
09-15 1618
一、promise是什么？ 二、promise的优点 1.指定回调函数的方式更灵活 2.链式调用，解决回调地狱问题 三、promise执行特点 四、promise的状态属性 五、promise的API 1.then方法 2.catch方 3.finally方法 4.all方法 5.race方法 总结 1.promise 实例对象创建有几种方式 2.[[PromiseResult]] 赋值有几种方式 3.[[PromiseResult]] 取值有哪些方式
Promise从入门到精通 (第2章 Promise的理解和使用)
cjhxydream的博客
07-26 544
Promise从入门到精通 (第二章 Promise的理解和使用)
Promise知识点总结
酒客的博客
11-15 873
Promise重要知识点总结 1.什么是promise? promise是在js中进行异步编程的新的解决方案，以前旧的解决方案是单纯使用回调函数，从语法上来说，Promise是一个构造函数，从功能上来说，promise对象用来封装一个异步操作，并且可以获得成功或者失败的返回值。 2.为什么使用promise？ 1.promise使用回调函数更灵活，旧的回调函数必须在启动异步任务前指定。 2.promise支持链式调用，可以解决回调地狱问题。 回调地狱带来的问题： 代码臃肿，可读性差，可维护性差，
什么是Promise？如何使用Promise处理异步操作？
04-25
Promise是一种用于处理异步操作的JavaScript对象。它可以用来解决传统回调函数带来的回调地狱问题，使异步代码更加可读、可维护。 Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值