学习Promise

2024-04-09 20:40:27 阅读数 505

一、Promise

1.异步任务的处理

在ES6出来之后，有很多关于Promise的讲解、文章，也有很多经典的书籍讲解Promise.

虽然等你学会了Promise之后，会觉得Promise不过如此，但是在初次接触的时候都会觉得这个东西不好理解。

那么这里我从几个实际的例子来作为切入点：

我们调用一个函数，这个函数中发送网络请求（我们可以用定时器来模拟）
如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去。
如果发送网络请求失败了，那么告知调用者发送失败，并且告知错误信息。

【任何一个新技术的出来，就是用来解决原有技术的某一个痛点】

//request.js
function requestData(url){
  // 模拟网络请求
  setTimeout(()=>{
    //拿到请求的1结果
    //url传入的是 coderwhy，请求成功
    if(url==="coderwhy"){
        let names=["wjy","hyz","tqy"];

        return names;//* 但其实这个return外面是拿不到结果的
    }else{// 否则请求失败
      let errMessage="请求失败,url错误";

      return errMessage;//* 但其实这个return外面是拿不到结果的
    }
    
  },3000)
}

// main.js
requestData("coderwhy")

修改requestData参数，需要传入成功的回调函数successCallback和失败的回调函数failCallback。

//request.js
function requestData(url,successCallback,failCallback){
  // 模拟网络请求
  setTimeout(()=>{
    //拿到请求的1结果
    //url传入的是 coderwhy，请求成功
    if(url==="coderwhy"){
        let names=["wjy","hyz","tqy"];
        successCallback(names);
    }else{// 否则请求失败
      let errMessage="请求失败,url错误";
      failCallback(errMessage)
    }
    
  },3000)
}

// main.js
requestData("coderwhy",(res)=>{
  console.log("成功：",res);
},(err)=>{
  console.log("失败：",err);
})

1.1 回调函数的弊端

如果是我们自己封装的requestData，那么我们在封装的时候必须要自己设计好callback名称，并且使用好
如果我们使用的是别人封装的requestData或者一些第三方库，那么我们必须去看别人的源码或者文档，才知道这个函数怎么去获取结果的。
这种沟通成本非常多的

那么有没有一种更好的方式：

那么有没有会返回一个承诺，这个承诺（规范了所有的代码编写逻辑）

// *  更好的方案 承诺(规范好了所有的代码编写逻辑)
function requestData2(){
  return "承诺"
}

const chengnuo=requestData2()

2.什么是Promise

Promise是ES6新增的一个API，它是一个类，可以翻译成承诺、许诺、期约；

当我们需要给予调用者一个承诺：待会儿我会传给你回调数据时，就可以创建一个Promise对象

在通过new 创建Promise对象时，我们需要传入一个回调函数，我们称之为executor

这个回调函数会被立即执行，并且给传入另外两个回调函数resolve、reject
当我们调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数
当我们调用reject回调函数时，会执行Promise对象的catch方法传入的回调函数。

image-20220514142507394.png

function foo(){
  // Promise
  return new Promise((resolve,reject)=>{
    // resolve();
    reject();
  })
}

// main.js
const fooPromise=foo();

// * then方法传入的回调函数，会在Promise执行resolve函数时，会回调。
fooPromise.then(()=>{

})

// * catch方法传入的回调函数，会在Promise执行reject函数时，被回调
fooPromise.catch(()=>{

})

// class Person{
//   constructor(callback){
//     function foo(){

//     }
//     function bar(){

//     }
//     callback(foo,bar)
//   }
// }

// const p=new Person((foo,bar)=>{
//   foo();
//   bar()
// });

// * Promise是一个类，可以传入参数，参数是回调函数，这个回调函数在传入时，会立即被执行。
/**
 * * 传入的回调函数可以称之为 executor
 * * 这个回调函数会有两个参数：
 * * resolve :成功时，执行resolve回调
 * * reject：失败时，执行reject回调
 */
const promise=new Promise((resolve,reject)=>{
  // console.log("promise传入的函数立即被执行了");
  resolve();
})

promise.then(()=>{

})

promise.catch(()=>{
  
})

image-20220514144055335.png

2.1 异步处理的Promise方式

/**
 * * 回调的弊端
 * *   1.如果是我们自己封装的requestData，那么我们在封装的时候必须要自己设计好callback名称，并且使用好
* *    2.如果我们使用的是别人封装的requestData或者一些第三方库，那么我们必须去看别人的源码或者文档，才知道这个函数怎么去获取结果的。
* *    3.这种沟通成本非常多的
 */

//request.js
function requestData(url,successCallback,failCallback){
  // 模拟网络请求
  
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      //拿到请求的1结果
      //url传入的是 coderwhy，请求成功
      if(url==="coderwhy"){
          let names=["wjy","hyz","tqy"];
          resolve(names);
      }else{// 否则请求失败
        let errMessage="请求失败,url错误";
        reject(errMessage)
      }
      
    },3000);
  })
}



//main.js

const promise=requestData("coderwhy");

// * then方法传入两个回调函数
// * 第一个回调函数，会在Promise执行resolve函数时，被回调
// * 第二个回调函数，会在Promise执行reject函数时，被回调
promise.then((res)=>{
  console.log("请求成功:",res);
},(err)=>{
  console.log("请求失败了:",err);
})

3.Promise的三种状态

// 完全等价于下面的代码
new Promise((resolve,reject)=>{
  console.log("------------------");//* 阶段：pending 
  resolve();
}).then(res=>{
  console.log("res:",res);//* fulfilled（固定、已敲定）
},err=>{
  console.log("err:",err);//* rejected (已拒绝 )
})

上面的Promise使用过程，我们可以将它划分成三个状态：

待定(pending)：初始状态，既没有被兑现，也没有被拒绝
- 当执行executor中的代码时，处于该状态。
已兑现(fulfilled)：意味着操作成功完成
- 执行了resolved时，处于该状态
已拒绝(rejected)：意味着操作失败
- 执行了reject 时，处于该状态

Promise状态一旦被确定下来，那么就是不可更改的（锁定），例如下面我们先执行了resolve，将状态改为已兑现(fulfilled)。后面又执行了reject，企图将状态修改为已拒绝(rejected)，但发现其实并不能进行修改的。

// * Promise状态一旦被确定下来，那么就是不可更改的（锁定）
new Promise((resolve,reject)=>{
  console.log("------------------");//* 阶段：pending 
  resolve();//* fulfilled（固定、已敲定）
  reject();////* rejected (已拒绝 ) ，这行代码没有任何意义。
  // resolve(123)
}).then(res=>{
  console.log("res:",res);
},err=>{
  console.log("err:",err);
})

4. resolve参数

情况一：如果resolve传入一个普通的值或者对象，那么这个值就会作为then回调的参数
情况二：如果resolve传入的是另外一个Promise，那么这个新Promise的状态会决定原Promise的状态
情况三：如果resolve传入的是一个对象，并且这个对象有实现then方法，那么就会执行then方法，并且根据then方法的结果来决定Promise的状态。

/**
 * resolve（参数）
 * *  (1)普通的值或者对象
 * *  (2)传入一个Promise
 * *    那么当前的Promise状态由传入的Promise来决定
 * *    相当于状态进行了移交
 * *  (3)传入一个对象，并且这个对象有实现的then方法 (thenable)，那么也会执行该then方法，并且由该then方法决定后续状态
 */

// * 传入Promise的特殊情况
// const newPromise=new Promise((resolve,reject)=>{
//   // resolve("aaaaa")
//   reject("err message")
// })
// new Promise((resolve,reject)=>{
//   resolve(newPromise)
// }).then(res=>{
//   console.log("res:",res);
// },err=>{
//   console.log("err:",err);
// })



//*  2.传入一个对象，这个对象有实现then方法，由该then方法决定后续状态
new Promise((resolve,reject)=>{

  const obj={
    then:function(resolve,reject){
      // resolve("resolve message");

      reject("reject message")
    }
  }
  resolve(obj);
}).then(res=>{
  console.log("res:",res);
},err=>{
  console.log("err:",err);
})

5.then方法

5.1 then方法-接受两个参数

then方法是Promise对象的一个方法，它其实是放在Promise的原型上的Promise.prototype.then

then方法接受两个参数：

fulfilled的回调函数：当状态变成fulfilled时会回调的函数
rejected的回调函数：当状态变成rejected时会回调的函数

promise.then(res=>{
  console.log("res：",res);
},err=>{
 console.log("err：",err); 
})

// 等价于下面
promise.then(res=>{
  console.log("res：",res);
}).catch(err=>{
  console.log("err：",err);
})

5.2 then方法-可以多次调用

同一个promise对象的then方法可以调用多次。

当resolve方法被回调时，所有传入到then方法的回调函数会执行。

// * Promise有哪些对象方法
// console.log(Promise.prototype);
// console.log(Object.getOwnPropertyDescriptors(Promise.prototype));

const promise=new Promise((resolve,reject)=>{
  resolve("hahahaha")
})

// *同一个promise可以多次调用then方法
// * 当我们的resolve方法被回调时，所有的then方法传入的回调函数都会被调用
promise.then((res)=>{
  console.log("res:",res);
})


promise.then((res)=>{
  console.log("res2:",res);
})

promise.then((res)=>{
  console.log("res3:",res);
})

5.3 then方法——返回值

其实then方法有返回值，返回的是新的Promise对象

then方法的回调函数也有返回值，当then方法中的回调函数返回一个结果时，那么它处于fulfilled状态，并且会将结果作为resolve的参数

如果返回的是一个普通的值（数字、字符串、对象），这个值会作为then方法返回的Promise对象的resolve的值

如果没有返回值，则默认返回的是undefined

const promise=new Promise((resolve,reject)=>{
  resolve("hahahaha")
})
promise.then(res=>{
  // *如果回调函数没有返回值，则返回的是一个undefined
  return {name:"wjy"}
}).then(res=>{
  console.log("res:",res);
})

如果返回的是一个Promise对象，

这个返回的Promise对象会决定then方法返回的Promise的状态

const promise=new Promise((resolve,reject)=>{
  resolve("hahahaha")
})
// *如果返回的是一个Promise对象
promise.then(res=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve("hello wjy")
    },3000)
  })
}).then(res=>{
  console.log("res：",res);
})

如果返回的是一个对象，这个对象实现了thenable（then方法），会立即执行then方法，并根据then方法的结果来决定Promise的状态。

// *如果返回了是一个对象，并且这个对象上
promise.then(res=>{  
  return {  //* new Promise(resolve=>resolve(obj.then))
    then:function(resolve,reject){
      resolve(2222)
    }
  } 
}).then(res=>{
  console.log("res:",res);
})

6.catch方法

then方法内部可以传入两个参数（两个回调函数）

当resolve函数被执行时，会调用then方法的第一个参数（回调函数）

当reject函数被执行时，会调用then方法的第二个参数（回调函数）【或者内部发生错误，也会被then方法的第二个参数捕获到。】

const promise=new Promise((resolve,reject)=>{
  reject("rejected status")
})

promise.then(undefined,err=>{
  console.log("err:",err);
})

const promise=new Promise((resolve,reject)=>{
  throw new Error("rejected status")
})

promise.then(undefined,err=>{
  console.log("err:",err);
})

如果将成功和失败的回调函数写在一块，阅读性差，比如下面：

const promise=new Promise((resolve,reject)=>{
  // reject("rejected status")
  throw new Error("rejected status")
})

promise.then(res=>{
  console.log("res:",res);
},err=>{
  console.log("err:",err);
})

支持另外一种方法：

通过catch方法传入错误或拒绝的捕获的回调函数：

const promise=new Promise((resolve,reject)=>{
  reject("rejected status")
})


// * 通过catch方法传入错误或（拒绝）捕获的回调函数
// promise/a+规范
promise.catch(err=>{
  console.log("err：",err)
})

还支持另外一种写法：

catch会优先捕获第一个Promise对象的异常捕获，如果第一个Promise对象没有发生异常，则不会使用，会留着下一次使用。如果第二个Promise对象发生异常，这个catch会去捕获。
这个catch方法比较特殊

const promise=new Promise((resolve,reject)=>{
  reject("rejected status")
  // throw new Error("rejected status")
})


promise.then(res=>{
  return 111
}).catch(err=>{
     console.log("err：",err)
})

image-20220514193022157.png

const promise=new Promise((resolve,reject)=>{
  resolve("resolve status")
})


promise.then(res=>{
  throw new Error("发生错误")
  return 111
}).catch(err=>{
  console.log("err：",err);//*如果第一个promise对象没有异常，所以就不会执行，等着下一次使用,会给下一个Promise对象使用
  console.log("------");
})

image-20220514193638998.png

6.1 拒绝捕获的问题

// * 拒绝捕获的问题（前面课程）
const promise=new Promise((resolve,reject)=>{
  reject("rejected status");//* 有点类似抛出异常
})
promise.then(res=>{
  console.log("res:",res);
})

promise.catch(err=>{
  console.log("err:",err);
})

这个代码运行后会报错的。

image-20220514195146223.png

之间不会相互影响的
因为在then方法中没有进行捕获，以异常的方式退出。
如果代码中没有then方法就不会报错

改成下面这种就不会报错：

// * 拒绝捕获的问题（前面课程）
const promise=new Promise((resolve,reject)=>{
  reject("rejected status");//* 有点类似抛出异常
})
promise.then(res=>{
  console.log("res:",res);
}).catch(err=>{
  console.log("err:",err);
})

或

const promise=new Promise((resolve,reject)=>{
  reject("rejected status");//* 有点类似抛出异常
})
promise.then(res=>{
  console.log("res:",res);
},err=>{
  console.log("err:",err);
})

6.2 reject和throw同时存在抛出哪个异常

如果执行了reject()，throw会被忽略

如果执行了throw，throw后面的代码都不会再执行。

6.3 catch方法多次调用

catch方法也是Promise对象上的一个方法，它也是放在Promise的原型上的Promise.prototype.catch方法。

同一个Promise对象的catch方法可以被调用多次

每当调用我们可以传入对应的reject回调
当Promise的状态变成rejected的时候，这些回调函数都会被执行。

const promise=new Promise((resolve,reject)=>{
  reject("aaa");
})

promise.catch(err=>{
  console.log("err1:",err);
})

promise.catch(err=>{
  console.log("err2:",err);
})

promise.catch(err=>{
  console.log("err3:",err);
})

6.4 catch方法——返回值

事实上catch方法也是会返回一个Promise对象的，所以catch方法后面我们可以继续调用then方法或者catch方法

 const promise=new Promise((resolve,reject)=>{
  reject("aaa");
})

promise.then(res=>{
  console.log("res:",res);
}).catch(err=>{
  console.log("err:",err);
  return "catch return value"
}).then(res=>{
  console.log("res:",res);
})

const promise=new Promise((resolve,reject)=>{
  reject("aaa");
})
promise.then(res=>{
  console.log("res:",res);
}).catch(err=>{
  console.log("err:",err);
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve("my name")
    },3000)
  })
}).then(res=>{
  console.log("res:",res);
})

7.fanally方法

fanally是ES9（ES2018）新增的一个特性：表示无论Promise的状态变为fulfilled还是reject状态，最终都会被执行的代码。

finally方法是不接收参数的，因为无论前面是fulfilled状态，还是reject状态，它都会执行。

const promise=new Promise((resolve,reject)=>{
  resolve("resolve message");
})

promise.then(res=>{
  console.log("res:",res);
}).catch(err=>{
  console.log("err:",err);
}).finally(()=>{
  console.log("finally code execute");
})

finally其实也是返回一个Promise对象，但是其实很少人会用它

8.类方法——resolve方法

前面我们学习的then、catch、finally方法都属于Promise的实例方法，都是存放在Promise的prototype上的。

下面我们将学习类方法

有时候我们已经有一个现成的内容，希望将其转成Promise来使用，这个时候我们可以使用Promise.resolve方法来完成。

Promise.resolve()方法：相当于new Promise，并且执行resolve操作。

resolve的参数形式：

情况一：参数是一个普通的值或者对象
情况二：参数是一个Promise对象
情况三：参数是一个thenable

function foo(){
  const obj={name:"wjy"}
  return new Promise((resolve)=>{
    resolve(obj);
  });
}

foo().then(res=>{
  console.log("res：",res);
})

等价于下面：

function foo(){
  const obj={name:"wjy"}
 return Promise.resolve(obj);
}

foo().then(res=>{
  console.log("res：",res);
})

8.1 参数形式

// * 1.传入普通的值
// const promise=Promise.resolve({name:"wjy"});

// * 2.传入一个Promise,由这个新的Promise对象决定原Promise对象的状态
// const promise=Promise.resolve(new Promise((resolve,reject)=>{
//   // resolve("resolve2 message")
//     reject("reject message")
// }))

// promise.then(res=>{
//   console.log("res:",res);
// }).catch(err=>{
//   console.log("err:",err);
// })

// * 3. 传入thenable对象（实现了then方法），会立即执行then方法，由then方法的结果决定其Promise的状态
const promise=Promise.resolve({
  then:function(resolve,reject){
    // resolve("resolve ");
    reject("reject message")
  }
})

promise.then(res=>{
  console.log("res:",res);
}).catch(err=>{
  console.log("err:",err);
})

9.类方法——reject方法

reject方法类似于resolve方法，只是会将Promise对象的状态设置为rejected状态

Promise.reject的用法相当于new Promise，并且会调用reject

Promise.reject无论传过来的参数是什么状态，都会直接作为reject的参数传递到catch的。

10.类方法——all方法

它的作用是将多个Promise包裹在一起，形成一个新的Promise

新的Promise状态由包裹的所有Promise决定

当所有的Promise状态变为fulfilled状态时，新的Promise状态为fulfilled，并且会将所有的Promise的返回值组成一个数组
当有一个Promise状态变为rejected状态时，新的Promise状态为rejected，并且会将第一个reject的返回值作为参数

const p1=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve(1111)
  },1000)
})
const p2=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve(22222)
  },2000)
})
const p3=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject(33333)
  },3000)
})

// * 需求：所有的Promise都变成fulfilled,再拿到结果
//*  意外：在拿到所有结果之前，有一个promise变成了rejected,那么整个promise是rejected
Promise.all([p1,p2,p3,"aaaa"]).then(res=>{
  console.log("res:",res);
}).catch(err=>{
  // * 最后转到catch执行
  console.log("err:",err);
})

// * all：所有的promise为fulfilled时才会执行then方法，如果有一个状态为rejected，就会转成执行catch方法

11.类方法——allSettled方法

all方法有一个缺陷：当有一个Promise变成rejected状态时，新Promise就会立即变成对应的rejected状态。

那么对于resolved的，以及仍然处于pending状态的Promise，我们是获取不到对应的结果的。

在ES11（ES2020）中，添加了新的API Promise.allSettled

该方法会在所有的Promise都有结果(settled)，无论是fulfilled，还是rejected时，才会有最终的状态。
并且这个Promise的结果一定是fulfilled的

const p1=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve(1111)
  },1000)
})
const p2=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve(22222)
  },2000)
})
const p3=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject(33333)
  },3000)
})


// allSettled
// * 新的Promise的状态一定是fulfilled
Promise.allSettled([p1,p2,p3]).then(res=>{
  console.log("res:",res);
}).catch(err=>{
  console.log("err:",err);
})

12. 类方法——race

如果有一个Promise有了结果，我们就希望决定最终新的Promise的状态，那么可以使用race方法

race是竞技、竞赛的意思，表示多个Promise相互竞争，谁先有结果，那么就使用谁的结果。

const p1=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve(1111)
  },1000)
})
const p2=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve(22222)
  },2000)
})
const p3=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject(33333)
  },3000)
})


// * race ：竞技 竞赛
Promise.race([p1,p2,p3]).then(res=>{
  console.log("res:",res);
}).catch(err=>{
  console.log("err:",err);
})

13.类方法——any方法

any方法是ES12中新增的方法，和race方法是类似的：

any方法会等到一个fulfilled状态，才会决定新Promise的状态
如果所有的Promise都是rejected的，那么也会等到所有的Promise都变成rejected状态。

const p1=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject(1111)
  },1000)
})
const p2=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject(22222)
  },2000)
})
const p3=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject(33333)
  },3000)
})


// * any
Promise.any([p1,p2,p3]).then(res=>{
  console.log("res:",res);
}).catch(err=>{
  // *可以通过.errors拿到合计的错误信息
  console.log("err:",err.errors);
})

如果所有的Promise都是reject的，那么会报一个AggregateError的错误。

二、手写Promise

1.Promise的设计和构造方法

const PROMISE_STATUS_PENDING="pending";
const PROMISE_STATUS_FULFILLED="fulfilled";
const PROMISE_STATUS_REJECTED="rejected";
// * 自己手写的Promise要符合的一定的规范，要符合PromiseA+
class HYPromise{
  // * 记录状态
  constructor(executor) {
    // * 保存Promise的状态
    this.status=PROMISE_STATUS_PENDING;
    // * 保存传入的值
    this.value=undefined;
    this.reason=undefined;
    const resolve=(value)=>{
      if(this.status==PROMISE_STATUS_PENDING){
        this.status=PROMISE_STATUS_FULFILLED;
        this.value=value;
        console.log("resolve被调用");
      }
     
    }
    const reject=(reason)=>{
      if(this.status==PROMISE_STATUS_PENDING){
        this.status=PROMISE_STATUS_REJECTED;
        this.reason=reason;
        console.log("reject被调用");
      }
     
    }
    executor(resolve,reject)
  }
}

const promise=new HYPromise((resolve,reject)=>{
  console.log("状态pending");
  resolve("1111")
})

2.then方法的设计

 const PROMISE_STATUS_PENDING="pending";
const PROMISE_STATUS_FULFILLED="fulfilled";
const PROMISE_STATUS_REJECTED="rejected";
// * 自己手写的Promise要符合的一定的规范，要符合PromiseA+
class HYPromise{
  // * 记录状态
  constructor(executor) {
    // * 保存Promise的状态
    this.status=PROMISE_STATUS_PENDING;
    // * 保存传入的值
    this.value=undefined;
    this.reason=undefined;
    const resolve=(value)=>{
      if(this.status==PROMISE_STATUS_PENDING){
        this.status=PROMISE_STATUS_FULFILLED;
        queueMicrotask(()=>{ //* 定时器是一个宏任务，会放在下一次事件循环时使用
        
          this.value=value;
          console.log("resolve被调用");
          // * 执行then传入进来的第一个回调函数
          this.onFulfilled(this.value)
        
      })
      }
     
     
    }
    const reject=(reason)=>{
      if(this.status==PROMISE_STATUS_PENDING){
        this.status=PROMISE_STATUS_REJECTED;
       queueMicrotask(()=>{
        this.reason=reason;
        console.log("reject被调用");
        // * 执行then传入进来的第二个回调函数
        this.onRejected(this.reason);
       })
      }
     
    }
    executor(resolve,reject)
  }
  then(onFulfilled,onRejected){
    this.onFulfilled=onFulfilled;
    this.onRejected=onRejected;
  }
 
}

const promise=new HYPromise((resolve,reject)=>{
  console.log("状态pending");
  // resolve("1111")
  reject("reject message")
})

promise.then(res=>{
  console.log("res:",res);
},err=>{
  console.log("err:",err);
})

promise.then(res=>{
  console.log("res2:",res);
},err=>{
  console.log("err2:",err);
})

// * 多次调用then，后面的then方法会覆盖前面的then方法，而且只会调用一次方法
// * then方法不能实现链式调用

3.then方法的优化一

实现then多次调用
如果Promise状态已经确定，再次调用then方法，传入的回调函数应该直接执行

 const PROMISE_STATUS_PENDING="pending";
const PROMISE_STATUS_FULFILLED="fulfilled";
const PROMISE_STATUS_REJECTED="rejected";
// * 自己手写的Promise要符合的一定的规范，要符合PromiseA+
class HYPromise{
  // * 记录状态
  constructor(executor) {
    // * 保存Promise的状态
    this.status=PROMISE_STATUS_PENDING;
    // * 保存传入的值
    this.value=undefined;
    this.reason=undefined;
    this.onFulfilledFns=[];
    this.onRejectedFns=[];
    const resolve=(value)=>{
      if(this.status==PROMISE_STATUS_PENDING){
        queueMicrotask(()=>{ //* 定时器是一个宏任务，会放在下一次事件循环时使用
          this.status=PROMISE_STATUS_FULFILLED;
          this.value=value;
          console.log("resolve被调用");
          // * 执行then传入进来的第一个回调函数
         this.onFulfilledFns.forEach(Fn=>{
           Fn(this.value)
         })
        
      })
      }
     
     
    }
    const reject=(reason)=>{
      if(this.status==PROMISE_STATUS_PENDING){
       
       queueMicrotask(()=>{ 
         this.status=PROMISE_STATUS_REJECTED;
        this.reason=reason;
        console.log("reject被调用");
        // * 执行then传入进来的第二个回调函数
        this.onRejectedFns.forEach(Fn=>{
          Fn(this.reason)
        })
       })
      }
     
    }
    executor(resolve,reject)
  }
  then(onFulfilled,onRejected){
    // 1.如果then方法调用的时候，状态已经确定下来了，应该直接执行的
    if(this.status===PROMISE_STATUS_FULFILLED&&onFulfilled){
      onFulfilled(this.value);
    }else if(this.status===PROMISE_STATUS_REJECTED&&onRejected){
      onRejected(this.reason)
    }else{
      // 将成功回调和失败回调添加到数组中
    this.onFulfilledFns.push(onFulfilled);
    this.onRejectedFns.push(onRejected);
    }
    
  }
 
}

const promise=new HYPromise((resolve,reject)=>{
  console.log("状态pending");
  resolve("1111");//resolved/fulfilled
})

promise.then(res=>{
  console.log("res:",res);
},err=>{
  console.log("err:",err);
})

promise.then(res=>{
  console.log("res2:",res);
},err=>{
  console.log("err2:",err);
})



setTimeout(()=>{
  promise.then(res=>{
    console.log(res);
  })
},1000)

// * 解决了then方法的多次调用
// * 在确定Promise状态之后，再次调用then
// const promise2=new Promise((resolve,reject)=>{
//   resolve("aaaaa");
// })

// setTimeout(()=>{
//   promise2.then(res=>{ //原生编写了
//     console.log(res);
//   })
// },1000)

4.then方法的优化二

实现了一个链式调用（返回一个新的Promise对象，使用新的Promise对象的resolve方法去处理对应的回调函数的返回值）
实现了对executor执行时发生异常（错误），应该执行reject函数
后面封装了一个工具函数，用来处理异常和回调

 const PROMISE_STATUS_PENDING="pending";
const PROMISE_STATUS_FULFILLED="fulfilled";
const PROMISE_STATUS_REJECTED="rejected";

// 工具函数
function execFunctionWithCatchError(exeFn,value,resolve,reject){
  try{
    let result=exeFn(value);
    reject(result);
  }catch(err){
    reject(err);
  }
}
// * 自己手写的Promise要符合的一定的规范，要符合PromiseA+
class HYPromise{
  // * 记录状态
  constructor(executor) {
    // * 保存Promise的状态
    this.status=PROMISE_STATUS_PENDING;
    // * 保存传入的值
    this.value=undefined;
    this.reason=undefined;
    this.onFulfilledFns=[];
    this.onRejectedFns=[];
    const resolve=(value)=>{
      if(this.status==PROMISE_STATUS_PENDING){
        // * 添加微任务
        queueMicrotask(()=>{ //* 定时器是一个宏任务，会放在下一次事件循环时使用
          if(this.status!==PROMISE_STATUS_PENDING) return;
          this.status=PROMISE_STATUS_FULFILLED;
          this.value=value;
          // console.log("resolve被调用");
          // * 执行then传入进来的第一个回调函数
         this.onFulfilledFns.forEach(Fn=>{
           Fn(this.value);
         })
        
      })
      }
     
     
    }
    const reject=(reason)=>{
      if(this.status==PROMISE_STATUS_PENDING){
      //  * 添加微任务
       queueMicrotask(()=>{ 
         if(this.status!==PROMISE_STATUS_PENDING) return;
         this.status=PROMISE_STATUS_REJECTED;
        this.reason=reason;
        // console.log("reject被调用");
        // * 执行then传入进来的第二个回调函数
        this.onRejectedFns.forEach(Fn=>{
          Fn(this.reason)
        })
       })
      }
     
    }

    // * 在调用executor时判断里面是否抛出异常
    try{
      executor(resolve,reject)
    }catch(err){
      reject(err)
    }
  }
  then(onFulfilled,onRejected){
   
    return new HYPromise((resolve,reject)=>{
       // 1.如果then方法调用的时候，状态已经确定下来了，应该直接执行的
    if(this.status===PROMISE_STATUS_FULFILLED&&onFulfilled){
      execFunctionWithCatchError(onFulfilled,this.value,resolve,reject);
    }else if(this.status===PROMISE_STATUS_REJECTED&&onRejected){
      execFunctionWithCatchError(onRejected,this.reason,resolve,reject);
    }else{
      // 将成功回调和失败回调添加到数组中
    this.onFulfilledFns.push(()=>{
      execFunctionWithCatchError(onFulfilled,this.value,resolve,reject);
    });
    this.onRejectedFns.push(()=>{
      execFunctionWithCatchError(onRejected,this.reason,resolve,reject);
 });
    }
    })
  }
 
}

const promise=new HYPromise((resolve,reject)=>{
  // console.log("状态pending");
  // resolve("1111");//resolved/fulfilled
  reject("2222")
  // throw new Error("创建就报的异常")
})

promise.then(res=>{
  console.log("res:",res);
  return "aaaa"

},err=>{
  console.log("err:",err);
  return "err bbb"
}).then(res=>{
  console.log("res2:",res);
},err=>{
  console.log("err2:",err);
})

// * 1. 实现了链式调用，链式调用的前提是返回一个新的HYPromise，最重要的是 什么时候执行resolve，什么时候执行reject
// * 一般在正常情况下，无论原HYPromise的状态是如何，后面都会执行新的HYPromise的resolve，并将其值作为参数
// * 只有在代码发生异常时（错误），才会让新的HYPromise执行reject

// * 2. 在HYPromise的executor执行过程中如果发生异常，应该要执行reject

5.catch方法的设计

catch只会接受一个onRejected的回调函数
- 在内部调用then方法，设置then方法的第一个参数为undefined,第二个参数的值为onRejected

  // * catch方法的设计
  catch(onRejected){
    this.then(undefined,onRejected);
  }

但是这样还是不能捕获原Promise对象的rejected状态，因为这个catch方法是针对新的Promise的rejected的状态，如果想要捕获原Promise的rejected状态，需要抛出异常，新的Promise对象的catch方法才能捕获到。

所以我们需要改写then方法：

在方法内部前面判断第二个参数是否有值，如果没有值，就重新赋值为一个函数，函数内部抛出一个异常

这样在新的Promise就能捕获到原来的promise的rejected的状态

 then(onFulfilled,onRejected){
   onRejected=onRejected||(err=>{throw err})
    //以下代码省略...
  }

全部的代码如下：

 const PROMISE_STATUS_PENDING="pending";
const PROMISE_STATUS_FULFILLED="fulfilled";
const PROMISE_STATUS_REJECTED="rejected";

// 工具函数
function execFunctionWithCatchError(exeFn,value,resolve,reject){
  try{
    let result=exeFn(value);
    reject(result);
  }catch(err){
    reject(err);
  }
}
// * 自己手写的Promise要符合的一定的规范，要符合PromiseA+
class HYPromise{
  // * 记录状态
  constructor(executor) {
    // * 保存Promise的状态
    this.status=PROMISE_STATUS_PENDING;
    // * 保存传入的值
    this.value=undefined;
    this.reason=undefined;
    this.onFulfilledFns=[];
    this.onRejectedFns=[];
    const resolve=(value)=>{
      if(this.status==PROMISE_STATUS_PENDING){
        // * 添加微任务
        queueMicrotask(()=>{ //* 定时器是一个宏任务，会放在下一次事件循环时使用
          if(this.status!==PROMISE_STATUS_PENDING) return;
          this.status=PROMISE_STATUS_FULFILLED;
          this.value=value;
          // console.log("resolve被调用");
          // * 执行then传入进来的第一个回调函数
         this.onFulfilledFns.forEach(Fn=>{
           Fn(this.value);
         })
        
      })
      }
     
     
    }
    const reject=(reason)=>{
      if(this.status==PROMISE_STATUS_PENDING){
      //  * 添加微任务
       queueMicrotask(()=>{ 
         if(this.status!==PROMISE_STATUS_PENDING) return;
         this.status=PROMISE_STATUS_REJECTED;
        this.reason=reason;
        // console.log("reject被调用");
        // * 执行then传入进来的第二个回调函数
        this.onRejectedFns.forEach(Fn=>{
          Fn(this.reason)
        })
       })
      }
     
    }

    // * 在调用executor时判断里面是否抛出异常
    try{
      executor(resolve,reject)
    }catch(err){
      reject(err)
    }
  }
  then(onFulfilled,onRejected){
   onRejected=onRejected||(err=>{throw err})
    return new HYPromise((resolve,reject)=>{
       // 1.如果then方法调用的时候，状态已经确定下来了，应该直接执行的
    if(this.status===PROMISE_STATUS_FULFILLED&&onFulfilled){
      execFunctionWithCatchError(onFulfilled,this.value,resolve,reject);
    }else if(this.status===PROMISE_STATUS_REJECTED&&onRejected){
      execFunctionWithCatchError(onRejected,this.reason,resolve,reject);
    }else{
      // 将成功回调和失败回调添加到数组中
    if(onFulfilled)this.onFulfilledFns.push(()=>{
      execFunctionWithCatchError(onFulfilled,this.value,resolve,reject);
    });
    if(onRejected)this.onRejectedFns.push(()=>{
      execFunctionWithCatchError(onRejected,this.reason,resolve,reject);
 });
    }
    })
  }
 
  // * catch方法的设计
  catch(onRejected){
    this.then(undefined,onRejected);
  }
}

const promise=new HYPromise((resolve,reject)=>{
  console.log("状态pending");
  // resolve("1111");//resolved/fulfilled
  reject("2222")
  // throw new Error("创建就报的异常")
})


promise.then(res=>{
  console.log("res:",res);
},err=>{
  console.log("err1:",err);
}).catch(err=>{ 
  console.log("err:",err);
})

6.finally方法的设计

const PROMISE_STATUS_FULFILLED="fulfilled";
const PROMISE_STATUS_PENDING="pending";
const PROMISE_STATUS_REJECTED="rejected";

// 工具函数

function execFunctionWithCatchError(exeFn,value,resolve,reject){
  try{
    const result=exeFn(value);
    resolve(result);
  }catch(err){
    reject(err);
  }
}
class HYPromise{
  constructor(executor){
    this.status=PROMISE_STATUS_PENDING;
    this.value=undefined;
    this.reason=undefined;
    // this.onFulfilled=undefined;
    // this.onRejected=undefined;
    this.onFulfilledFns=[];
    this.onRejectedFns=[];
    const resolve=(value)=>{
      if(this.status==PROMISE_STATUS_PENDING){
        // * 原生执行then方法时是一个微任务
        queueMicrotask(()=>{
          if(this.status!==PROMISE_STATUS_PENDING) return; 
          this.status=PROMISE_STATUS_FULFILLED;
          this.value=value;
          //  * 执行then传入进来的回调函数
          // this.onFulfilled(this.value);
          this.onFulfilledFns.forEach(Fn=>{
            Fn(this.value);
          })
        })
      }
     
    }

    const reject=(reason)=>{
      if(this.status==PROMISE_STATUS_PENDING){
       queueMicrotask(()=>{
         if(this.status!==PROMISE_STATUS_PENDING) return; 
        this.status=PROMISE_STATUS_REJECTED;
        this.reason=reason;
        // * 执行then传入进来的第二个参数
        // this.onRejected(this.reason);
        this.onRejectedFns.forEach(Fn=>{
          Fn(this.reason);
        })
       })

     }
    }
    try{
    executor(resolve,reject)
    }catch(err){
      reject(err);
    }
    
  }

  then(onFulfilled,onRejected){
     onRejected=onRejected|| (err=>{ throw err});
     onFulfilled=onFulfilled|| (value=>value)
    return new HYPromise((resolve,reject)=>{
      if(this.status==PROMISE_STATUS_FULFILLED&&onFulfilled){
        execFunctionWithCatchError(onFulfilled,this.value,resolve,reject);
      }else if(this.status==PROMISE_STATUS_REJECTED&&onRejected){
        execFunctionWithCatchError(onRejected,this.reason,resolve,reject);
      }else{
        if(onFulfilled)this.onFulfilledFns.push(()=>{
        execFunctionWithCatchError(onFulfilled,this.value,resolve,reject);
        });
        if(onRejected)this.onRejectedFns.push(()=>{
        execFunctionWithCatchError(onRejected,this.reason,resolve,reject);
        });
      }
    })
   
  }
  catch(onRejected){
    return this.then(undefined,onRejected);
  }

  finally(onFinally){
    return this.then(()=>{
      onFinally();
    },()=>{
      onFinally();
    })
  }
}

const promise=new HYPromise((resolve,reject)=>{
  console.log("状态pending");
  // reject("111");
  resolve("222");
  // throw new Error("pending err")
  
})


promise.then(res=>{
  console.log("res:",res);
}).catch(err=>{
  console.log("catch err:",err);
}).finally(()=>{
  console.log("finally方法实现");
})
// * 实现finally方法

7.类方法 resolve和reject的设计

const PROMISE_STATUS_FULFILLED="fulfilled";
const PROMISE_STATUS_PENDING="pending";
const PROMISE_STATUS_REJECTED="rejected";

// 工具函数

function execFunctionWithCatchError(exeFn,value,resolve,reject){
  try{
    const result=exeFn(value);
    resolve(result);
  }catch(err){
    reject(err);
  }
}
class HYPromise{
  constructor(executor){
    this.status=PROMISE_STATUS_PENDING;
    this.value=undefined;
    this.reason=undefined;
    // this.onFulfilled=undefined;
    // this.onRejected=undefined;
    this.onFulfilledFns=[];
    this.onRejectedFns=[];
    const resolve=(value)=>{
      if(this.status==PROMISE_STATUS_PENDING){
        // * 原生执行then方法时是一个微任务
        queueMicrotask(()=>{
          if(this.status!==PROMISE_STATUS_PENDING) return; 
          this.status=PROMISE_STATUS_FULFILLED;
          this.value=value;
          //  * 执行then传入进来的回调函数
          // this.onFulfilled(this.value);
          this.onFulfilledFns.forEach(Fn=>{
            Fn(this.value);
          })
        })
      }
     
    }

    const reject=(reason)=>{
      if(this.status==PROMISE_STATUS_PENDING){
       queueMicrotask(()=>{
         if(this.status!==PROMISE_STATUS_PENDING) return; 
        this.status=PROMISE_STATUS_REJECTED;
        this.reason=reason;
        // * 执行then传入进来的第二个参数
        // this.onRejected(this.reason);
        this.onRejectedFns.forEach(Fn=>{
          Fn(this.reason);
        })
       })

     }
    }
    try{
    executor(resolve,reject)
    }catch(err){
      reject(err);
    }
    
  }

  then(onFulfilled,onRejected){
     onRejected=onRejected|| (err=>{ throw err});
     onFulfilled=onFulfilled|| (value=>value)
    return new HYPromise((resolve,reject)=>{
      if(this.status==PROMISE_STATUS_FULFILLED&&onFulfilled){
        execFunctionWithCatchError(onFulfilled,this.value,resolve,reject);
      }else if(this.status==PROMISE_STATUS_REJECTED&&onRejected){
        execFunctionWithCatchError(onRejected,this.reason,resolve,reject);
      }else{
        if(onFulfilled)this.onFulfilledFns.push(()=>{
        execFunctionWithCatchError(onFulfilled,this.value,resolve,reject);
        });
        if(onRejected)this.onRejectedFns.push(()=>{
        execFunctionWithCatchError(onRejected,this.reason,resolve,reject);
        });
      }
    })
   
  }
  catch(onRejected){
    return this.then(undefined,onRejected);
  }

  finally(onFinally){
    return this.then(()=>{
      onFinally();
    },()=>{
      onFinally();
    })
  }
  static resolve(value){
    return new HYPromise((resolve,reject)=>{
      resolve(value);
    })
  }
  static reject(reason){
    return new HYPromise((resolve,reject)=>{
      reject(reason);
    })
  }
}

HYPromise.resolve(123).then(res=>{
  console.log("res:",res);
})

HYPromise.reject("err message").catch(err=>{
  console.log("err:",err);
})


// * 实现了类方法 resolve和reject方法

8. 类方法 all 和allSettled

const PROMISE_STATUS_FULFILLED="fulfilled";
const PROMISE_STATUS_PENDING="pending";
const PROMISE_STATUS_REJECTED="rejected";

// 工具函数

function execFunctionWithCatchError(exeFn,value,resolve,reject){
  try{
    const result=exeFn(value);
    resolve(result);
  }catch(err){
    reject(err);
  }
}
class HYPromise{
  constructor(executor){
    this.status=PROMISE_STATUS_PENDING;
    this.value=undefined;
    this.reason=undefined;
    // this.onFulfilled=undefined;
    // this.onRejected=undefined;
    this.onFulfilledFns=[];
    this.onRejectedFns=[];
    const resolve=(value)=>{
      if(this.status==PROMISE_STATUS_PENDING){
        // * 原生执行then方法时是一个微任务
        queueMicrotask(()=>{
          if(this.status!==PROMISE_STATUS_PENDING) return; 
          this.status=PROMISE_STATUS_FULFILLED;
          this.value=value;
          //  * 执行then传入进来的回调函数
          // this.onFulfilled(this.value);
          this.onFulfilledFns.forEach(Fn=>{
            Fn(this.value);
          })
        })
      }
     
    }

    const reject=(reason)=>{
      if(this.status==PROMISE_STATUS_PENDING){
       queueMicrotask(()=>{
         if(this.status!==PROMISE_STATUS_PENDING) return; 
        this.status=PROMISE_STATUS_REJECTED;
        this.reason=reason;
        // * 执行then传入进来的第二个参数
        // this.onRejected(this.reason);
        this.onRejectedFns.forEach(Fn=>{
          Fn(this.reason);
        })
       })

     }
    }
    try{
    executor(resolve,reject)
    }catch(err){
      reject(err);
    }
    
  }

  then(onFulfilled,onRejected){
     onRejected=onRejected|| (err=>{ throw err});
     onFulfilled=onFulfilled|| (value=>value)
    return new HYPromise((resolve,reject)=>{
      if(this.status==PROMISE_STATUS_FULFILLED&&onFulfilled){
        execFunctionWithCatchError(onFulfilled,this.value,resolve,reject);
      }else if(this.status==PROMISE_STATUS_REJECTED&&onRejected){
        execFunctionWithCatchError(onRejected,this.reason,resolve,reject);
      }else{
        if(onFulfilled)this.onFulfilledFns.push(()=>{
        execFunctionWithCatchError(onFulfilled,this.value,resolve,reject);
        });
        if(onRejected)this.onRejectedFns.push(()=>{
        execFunctionWithCatchError(onRejected,this.reason,resolve,reject);
        });
      }
    })
   
  }
  catch(onRejected){
    return this.then(undefined,onRejected);
  }

  finally(onFinally){
    return this.then(()=>{
      onFinally();
    },()=>{
      onFinally();
    })
  }
  static resolve(value){
    return new HYPromise((resolve,reject)=>{
      resolve(value);
    })
  }
  static reject(reason){
    return new HYPromise((resolve,reject)=>{
      reject(reason);
    })
  }
  static all(promises){
    // * 问题关键：什么时候执行resolve，什么时候执行reject
   return new HYPromise((resolve,reject)=>{
     let values=[];
      promises.forEach(promise=>{
        promise.then(res=>{
           values.push(res);
           if(values.length==promises.length) resolve(values);
        }).catch(err=>{
           reject(err);
        })
      })
   })
  }
  static allSettled(promises){
    
    return new Promise((resolve)=>{
      let results=[];
      promises.forEach(promise=>{
        promise.then(res=>{
          results.push({status:PROMISE_STATUS_FULFILLED,value:res})
          if(results.length==promises.length)
          resolve(results);
        }).catch(err=>{
          results.push({status:PROMISE_STATUS_REJECTED,value:err})
          if(results.length==promises.length)
          resolve(results);
        })
      })
    })
  }
}

const p1=new Promise((resolve)=>{
  setTimeout(()=>{
    resolve(1111)
  },1000)
})

const p2=new Promise((resolve)=>{
  setTimeout(()=>{
    resolve(2222)
  },2000)
})

const p3=new Promise((resolve)=>{
  setTimeout(()=>{
    resolve(3333)
  },3000)
})
// *all方法会产生一个新的Promise对象，这个新的Promise对象是由前面的所有的Promise来决定其状态
// * 如果全部为fulfilled，则会执行then方法，如果有一个为rejected，则直接执行catch方法
HYPromise.all([p1,p2,p3]).then(res=>{
  console.log("res:",res);
}).catch(err=>{
  console.log("err:",err);
})


// * allSettled：它会等所有的Promise都有结果，然后再执行resolve方法，它是没有reject方法的执行
// * 实现了all方法：

HYPromise.allSettled([p1,p2,p3]).then(res=>{
  console.log("res:",res);
}).catch(err=>{
  console.log("err:",err);
})

9. 类方法 race和any

const PROMISE_STATUS_FULFILLED="fulfilled";
const PROMISE_STATUS_PENDING="pending";
const PROMISE_STATUS_REJECTED="rejected";

// 工具函数

function execFunctionWithCatchError(exeFn,value,resolve,reject){
  try{
    const result=exeFn(value);
    resolve(result);
  }catch(err){
    reject(err);
  }
}
class HYPromise{
  constructor(executor){
    this.status=PROMISE_STATUS_PENDING;
    this.value=undefined;
    this.reason=undefined;
    // this.onFulfilled=undefined;
    // this.onRejected=undefined;
    this.onFulfilledFns=[];
    this.onRejectedFns=[];
    const resolve=(value)=>{
      if(this.status==PROMISE_STATUS_PENDING){
        // * 原生执行then方法时是一个微任务
        queueMicrotask(()=>{
          if(this.status!==PROMISE_STATUS_PENDING) return; 
          this.status=PROMISE_STATUS_FULFILLED;
          this.value=value;
          //  * 执行then传入进来的回调函数
          // this.onFulfilled(this.value);
          this.onFulfilledFns.forEach(Fn=>{
            Fn(this.value);
          })
        })
      }
     
    }

    const reject=(reason)=>{
      if(this.status==PROMISE_STATUS_PENDING){
       queueMicrotask(()=>{
         if(this.status!==PROMISE_STATUS_PENDING) return; 
        this.status=PROMISE_STATUS_REJECTED;
        this.reason=reason;
        // * 执行then传入进来的第二个参数
        // this.onRejected(this.reason);
        this.onRejectedFns.forEach(Fn=>{
          Fn(this.reason);
        })
       })

     }
    }
    try{
    executor(resolve,reject)
    }catch(err){
      reject(err);
    }
    
  }

  then(onFulfilled,onRejected){
     onRejected=onRejected|| (err=>{ throw err});
     onFulfilled=onFulfilled|| (value=>value)
    return new HYPromise((resolve,reject)=>{
      if(this.status==PROMISE_STATUS_FULFILLED&&onFulfilled){
        execFunctionWithCatchError(onFulfilled,this.value,resolve,reject);
      }else if(this.status==PROMISE_STATUS_REJECTED&&onRejected){
        execFunctionWithCatchError(onRejected,this.reason,resolve,reject);
      }else{
        if(onFulfilled)this.onFulfilledFns.push(()=>{
        execFunctionWithCatchError(onFulfilled,this.value,resolve,reject);
        });
        if(onRejected)this.onRejectedFns.push(()=>{
        execFunctionWithCatchError(onRejected,this.reason,resolve,reject);
        });
      }
    })
   
  }
  catch(onRejected){
    return this.then(undefined,onRejected);
  }

  finally(onFinally){
    return this.then(()=>{
      onFinally();
    },()=>{
      onFinally();
    })
  }
  static resolve(value){
    return new HYPromise((resolve,reject)=>{
      resolve(value);
    })
  }
  static reject(reason){
    return new HYPromise((resolve,reject)=>{
      reject(reason);
    })
  }
  static all(promises){
    // * 问题关键：什么时候执行resolve，什么时候执行reject
   return new HYPromise((resolve,reject)=>{
     let values=[];
      promises.forEach(promise=>{
        promise.then(res=>{
           values.push(res);
           if(values.length==promises.length) resolve(values);
        }).catch(err=>{
           reject(err);
        })
      })
   })
  }
  static allSettled(promises){
    
    return new HYPromise((resolve)=>{
      let results=[];
      promises.forEach(promise=>{
        promise.then(res=>{
          results.push({status:PROMISE_STATUS_FULFILLED,value:res})
          if(results.length==promises.length)
          resolve(results);
        }).catch(err=>{
          results.push({status:PROMISE_STATUS_REJECTED,value:err})
          if(results.length==promises.length)
          resolve(results);
        })
      })
    })
  }

  static race(promises){
    return new HYPromise((resolve,reject)=>{
      promises.forEach(promise=>{
        // promise.then(res=>{
        //   resolve(res);
        // }).catch(err=>{
        //   reject(err);
        // })
        promise.then(resolve,reject)
      })
    })
  }
  static any(promises){
    // * resolve必须等待有一个成功的结果
    // * reject 所有的都失败才执行 reject
    return new HYPromise((resolve,reject)=>{
      let count=0;
      let reasons=[];
      promises.forEach(promise=>{
        promise.then(res=>{
          resolve(res)
        }).catch(err=>{
          reasons.push(err);
          if(reasons.length==promises.length){
            
            // reject(reasons)
            reject(new AggregateError(reasons," AggregateError: All promises were rejected"))
          }
        })
      })
    })
  }
}

// const p1=new Promise((resolve)=>{
//   setTimeout(()=>{
//     resolve(1111)
//   },1000)
// })

// const p2=new Promise((resolve)=>{
//   setTimeout(()=>{
//     resolve(2222)
//   },2000)
// })

// const p3=new Promise((resolve)=>{
//   setTimeout(()=>{
//     resolve(3333)
//   },3000)
// })

// HYPromise.race([p1,p2,p3]).then(res=>{
//   console.log("res:",res);
// }).catch(err=>{
//   console.log("err:",err);
// })

// * any方法
const p1=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject(1111)
  },1000)
})

const p2=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject(2222)
  },2000)
})

const p3=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject(3333)
  },3000)
})

HYPromise.any([p1,p2,p3]).then(res=>{
  console.log("res:",res);
}).catch(err=>{
  console.log("err:",err.errors);
})

三、总结

Promise.png