本文已参与「新人创作礼」活动，一起开启掘金创作之路

学习手写promise

准备条件~

一个 Promise 必然处于以下几种状态之一：
待定（pending）：初始状态，既没有被兑现，也没有被拒绝。
已兑现（fulfilled）：意味着操作成功完成。
已拒绝（rejected）：意味着操作失败。
Promise对不同的then方法最终都会执行。（所以此处处理回调函数是在一个onFulfilledArray）
Promise可以链式调用。（因此每次.then方法返回的都是一个新的Promise）
Prmise对于已经确定了状态后继续调用then方法，仍会执行该回调函数。(所以要设置对应的处理方式，即状态确定时的方法)。
进行书写~
1.定义状态和
const a = 'pending' const b = 'fulfilled' const c = 'rejected'

2.类class chPromise

 constructor(executor){
      this.state = a
      this.value = null
      this.reason  = null
      this.onfulfilledArray = []
      this.onrejectedArray = []
    const resolve = (value)=>{
      queueMicrotask(()=>{
           if(this.state === 'pending'){
            this.state = 'fulfilled'
            this.value = value
            this.onfulfilledArray.forEach((fn)=>{
              fn(value)
            })
           }
      })
    }

    const reject = (reason)=>{
      queueMicrotask(()=>{
        queueMicrotask(()=>{
          if(this.state === 'pending'){
           this.state = 'rejected'
           this.reason = reason
           this.onrejectedArray.forEach((fn)=>{
             fn(reason)
           })
          }
     })
      })
    }
   
    executor(resolve,reject)

  }

3.实现.then方法\

  then(onfulfilled,onrejected){
    return new chPromise((resolve,reject)=>{
      console.log(this.state);
       if(this.state == 'pending'){
      this.onfulfilledArray.push(onfulfilled)
      this.onrejectedArray.push(onrejected)
    }
    })
  }

针对 setTimeout(() => {
promise.then(res=>{ // 当执行到这部分任务已经加不进去，微任务的回调已经回调完了
console.log(res);
})\

  then(onfulfilled,onrejected){
    return new chPromise((resolve,reject)=>{
       if(this.state == 'fulfilled'){
        onfulfilled(this.value)
       }
       if(this.state == 'onrejected'){
        onrejected(this.reason)
       }
       if(this.state == 'pending'){
      this.onfulfilledArray.push(onfulfilled)
      this.onrejectedArray.push(onrejected)
    }
    })
  }

这种情况书写对应解决
5.将函数包裹在new chPromise（）里返回

return new chPromise((resolve,reject)=>{})

6.Promise 的链式调用

我们可以用 Promise.prototype.then()、Promise.prototype.catch() 和 Promise.prototype.finally() 这些方法将进一步的操作与一个变为已敲定状态的 promise 关联起来。

7.需要对上次.then方法的返回值进行判断

  function execFunctionr(execFn, value, resolve, reject) {
      try {
        const result = execFn(value)
        resolve(result)
      } catch (err) {
        reject(err)
      }
    }

8.Promise.all(iterable)

这个方法返回一个新的 promise 对象，等到所有的 promise 对象都成功或有任意一个 promise 失败。

如果所有的 promise 都成功了，它会把一个包含 iterable 里所有 promise 返回值的数组作为成功回调的返回值。顺序跟 iterable 的顺序保持一致。

一旦有任意一个 iterable 里面的 promise 对象失败则立即以该 promise 对象失败的理由来拒绝这个新的 promise。

Promise手写实现

本文已参与「新人创作礼」活动，一起开启掘金创作之路

学习手写promise

准备条件~