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

自定义Promise函数

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

  • resolve(),reject(),抛出异常
  • Promise的状态只能修改一次
  • Promise的then方法当中去执行回调
  • 异步任务 then 的 方法实现
  • 指定多个回调
  • 同步任务下then方法返回结果的实现
  • catch方法与异常穿透
  • Promise resolve方法封装
  • Promise reject方法封装
  • Promise all 方法封装
  • Promise race 方法封装
  • then指定的回调函数异步执行

    
    //声明构造函数
    function Promise(executor) {
    //给Promise对象添加属性
    this.PromiseState="pending";//默认值 pending
    this.PromiseResult=null;
    //声明属性来实现异步then的方法
    this.callbacks = [];
    //保存Promise实例对象 this 的值
    const self = this;

  // 声明成功时回调的resolve函数
  function resolve(data){
  //判断Promise的状态是否已经被修改 ，被修改就不能再次修改了 保证Promise的状态只能修改一次
  if(self.PromiseState !=='pending') return;
  //1.修改Promise对象的状态(promiseState)
  self.PromiseState = 'fulfilled';//成功：resolved、fulfilled
  //2.设置Promise对象结果值(promiseResult)
  self.PromiseState = data;

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

  }

  //声明失败时回调的reject函数
  function reject(data){
  //判断Promise的状态是否已经被修改 ，被修改就不能再次修改了 保证Promise的状态只能修改一次
  if(self.PromiseState !=='pending') return;
  //1.修改Promise对象的状态(promiseState)
  self.PromiseState = 'rejected';//失败：rejected
  //2.设置Promise对象结果值(promiseResult)
  self.PromiseState = data;
  //then指定的回调函数异步执行
  setTimeout(() => {
  // 调用失败的回调 来实现异步then的方法
  self.callbacks.forEach(item => {
  item.onRejected(data);
  });
  })

  }

  //抛出异常
  try {
  //同步调用【执行函数】
  executor(resolve,reject);
  } catch (error) {
  //修改Promise对象的状态为【失败】
  reject(error)
  }

}

//添加函数Promise的 then 方法
Promise.prototype.then =function(onResolved,onRejected){
const self = this;

//判断回调函数参数
if(typeof onRejected !== "function"){
    onRejected = reason=>{
        throw reason;
    }
}   
if(typeof onResolved !== "function"){
    onResolved = value =>value;
    // onResolved = value=>{
    //     return value;
    // }
}   
return new Promise((resolve,reject)=>{
    //封装公用函数
    function callback(type){
         try {
            //获取回调函数的执行结果
            let result = type(self.PromiseResult);//传递结果值
            //判断 是否Promise 的对象
            if(result instanceof Promise){
                //如果是Promise类型的对象 可以调then 的方法
                result.then(v=>{
                    resolve(v);
                },r=>{
                    reject(r);
                })
            }else{
                //结果的对象状态为成功
                resolve(result);
            }
        } catch (error) {
            reject(error);
        }
    }

    //调用回调函数
    //1.判断成功调用onResolved
    if(this.PromiseState === "fulfilled"){
        //then指定的回调函数异步执行
        setTimeout(() => {
            callback(onResolved);
        });

    }
    //2.判断失败调用onRejected
    if(this.PromiseState === "rejected"){
        //then指定的回调函数异步执行
        setTimeout(()=>{
            callback(onRejected);            
        })

    }

    //Promise异步任务 then 的 方法实现
    //1.判断 pengding的状态
    if(this.PromiseState === 'pending'){
        //状态不确定 保存回调函数
        this.callbacks.push({
            onResolved:function(){
                callback(onResolved);                   
            },
            onRejected:function(){
                callback(onRejected);                    
            }
        })
    }
})

}

//添加catch 方法
Promise.prototype.catch = function(onRejected){
return this.then(undefined,onRejected);
}

//添加 resolve 方法 属于类 不是属于实例对象
Promise.resolve = function(value){
//返回Promise 对象
return new Promise((resolve,reject)=>{
if(value instanceof Promise){
value.then(v=>{
resolve(v);
},r=>{
reject(r);
})
}else{
//状态设置为成功
resolve(value);
}
})
}

//添加 Promise.reject 方法 属于类 不是属于实例对象
Promise.reject = function(reason){
//返回Promise 对象
return new Promise((resolve,reject)=>{
reject(reason);
})
}
//添加 Promise.all方法的封装 属于类 不是属于实例对象
Promise.all = function(promise){
//返回的结果是一个Promise对象
return new Promise((resolve,reject)=>{
//声明计数变量
let count = 0;
//声明成功存发的数据
let successResultArr = [];
for(let i=0;i<promise.length;i++){
promise[i].then(v={
//得知这个对象的状态时成功的
//每个promise对象成功才能调
count++;
//将当前成功的结果存入到数组中
successResultArr[i] = v;
if(count === promise.length){
resolve(successResultArr);
}
},r=>{
reject(r);
})
}
})
}

//添加 reject方法封装 属于类 不是属于实例对象
Promise.race = function(promise){
return new Promise((resolve,reject)=>{
for(let i=0;i<promise.length;i++){
promise[i].then(v={
//修改返回对象的状态为【成功】
resolve(v)
},r=>{
//修改返回对象的状态为【失败】
reject(r);
})
}
})
}

//给Promise 封装成一个类
class Promise{

//构造方法
constructor(executor){
    //给Promise对象添加属性
    this.PromiseState="pending";//默认值 pending
    this.PromiseResult=null;
    //声明属性来实现异步then的方法
    this.callbacks = [];
    //保存Promise实例对象 this 的值
    const self = this;

    // 声明成功时回调的resolve函数
    function resolve(data){
        //判断Promise的状态是否已经被修改 ，被修改就不能再次修改了 保证Promise的状态只能修改一次
        if(self.PromiseState !=='pending') return;
        //1.修改Promise对象的状态(promiseState)
        self.PromiseState = 'fulfilled';//成功：resolved、fulfilled
        //2.设置Promise对象结果值(promiseResult)
        self.PromiseState = data;

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

    }

    //声明失败时回调的reject函数
    function reject(data){
        //判断Promise的状态是否已经被修改 ，被修改就不能再次修改了 保证Promise的状态只能修改一次
        if(self.PromiseState !=='pending') return;
        //1.修改Promise对象的状态(promiseState)
        self.PromiseState = 'rejected';//失败：rejected
        //2.设置Promise对象结果值(promiseResult)
        self.PromiseState = data;
        //then指定的回调函数异步执行
        setTimeout(() => {
            // 调用失败的回调   来实现异步then的方法
            self.callbacks.forEach(item => {
                item.onRejected(data);
            });
        })

    }

    //抛出异常
    try {
        //同步调用【执行函数】
        executor(resolve,reject);
    } catch (error) {
        //修改Promise对象的状态为【失败】
        reject(error)
    }
}

//then 方法的封装
then(onResolved,onRejected){
    const self = this;

    //判断回调函数参数
    if(typeof onRejected !== "function"){
        onRejected = reason=>{
            throw reason;
        }
    }   
    if(typeof onResolved !== "function"){
        onResolved = value =>value;
        // onResolved = value=>{
        //     return value;
        // }
    }   
    return new Promise((resolve,reject)=>{
        //封装公用函数
        function callback(type){
            try {
                //获取回调函数的执行结果
                let result = type(self.PromiseResult);//传递结果值
                //判断 是否Promise 的对象
                if(result instanceof Promise){
                    //如果是Promise类型的对象 可以调then 的方法
                    result.then(v=>{
                        resolve(v);
                    },r=>{
                        reject(r);
                    })
                }else{
                    //结果的对象状态为成功
                    resolve(result);
                }
            } catch (error) {
                reject(error);
            }
        }

        //调用回调函数
        //1.判断成功调用onResolved
        if(this.PromiseState === "fulfilled"){
            //then指定的回调函数异步执行
            setTimeout(() => {
                callback(onResolved);
            });

        }
        //2.判断失败调用onRejected
        if(this.PromiseState === "rejected"){
            //then指定的回调函数异步执行
            setTimeout(()=>{
                callback(onRejected);            
            })

        }

        //Promise异步任务 then 的 方法实现
        //1.判断 pengding的状态
        if(this.PromiseState === 'pending'){
            //状态不确定 保存回调函数
            this.callbacks.push({
                onResolved:function(){
                    callback(onResolved);                   
                },
                onRejected:function(){
                    callback(onRejected);                    
                }
            })
        }
    })
}

//catch 方法封装
catch(onRejected){
    return this.then(undefined,onRejected);
}

//添加 resolve 方法 属于类 不是属于实例对象 所以用 static 来修饰 表示静态成员
static resolve(value){
    //返回Promise 对象
    return new Promise((resolve,reject)=>{
        if(value instanceof Promise){
            value.then(v=>{
                resolve(v);
            },r=>{
                reject(r);
            })
        }else{
            //状态设置为成功
            resolve(value);
        }
    })
}

//添加 Promise.reject 方法 属于类 不是属于实例对象
static reject(reason){
    //返回Promise 对象
    return new Promise((resolve,reject)=>{
        reject(reason);         
    })
}
//添加 Promise.all方法的封装 属于类 不是属于实例对象
static all(promise){
    //返回的结果是一个Promise对象
    return new Promise((resolve,reject)=>{
        //声明计数变量
        let count = 0;
        //声明成功存发的数据
        let successResultArr = [];
        for(let i=0;i<promise.length;i++){
            promise[i].then(v={
                //得知这个对象的状态时成功的
                //每个promise对象成功才能调
                count++;
                //将当前成功的结果存入到数组中
                successResultArr[i] = v;
                if(count === promise.length){
                    resolve(successResultArr);
                }
            },r=>{
                reject(r);
            })
        }
    })
}

//添加 reject方法封装 属于类 不是属于实例对象
static race(promise){
    return new Promise((resolve,reject)=>{        
        for(let i=0;i<promise.length;i++){
            promise[i].then(v={
                //修改返回对象的状态为【成功】
                resolve(v)
            },r=>{
                //修改返回对象的状态为【失败】
                reject(r);
            })
        }
    })
}

}

## async 函数
-   函数的返回值 为 Promise 对象
-   promise 对象的结果有async 函数执行的返回决定
```javascript
    async function mian(){

    }

await 表达式

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

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

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

  
  async ffunction main(){
  let p = new Promise((resolve,reject)=>{
      //resolve('OK');
      reject('error');
  })
  //1.右侧为promise的情况
  // let p res = await p;// 返回结果为OK
  //2. 右侧为其他类型的数据
  // let res2 = await 20;//返回结果值为20
  // 3.如果promise 是失败的状态
  try {
      let res3 = await p;
  } catch (error) {
      console.log(error);
  }
  }