5K字 由浅入深聊聊Promise实现原理

最新推荐文章于 2024-09-16 06:30:00 发布
最新推荐文章于 2024-09-16 06:30:00 发布
阅读量528 收藏
点赞数 12
分类专栏： 原理 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQdd_/article/details/134177219
版权

5K字 由浅入深聊聊Promise实现原理

前言

大家好，我是一个有想法的前端。这几天再回顾基础知识时，对Promise有了较为深入的理解，那今天就来分享下怎么由浅入深的掌握Promise并且学会手写Promise

如果写的有问题，欢迎大家指出问题，一起讨论，让我再打磨打磨

希望大家支持一下，长文不易，记得给点个赞👍👍👍

概念

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise 拉出来单练

那我们先把Promise拉出来练练，看看是什么玩意，在控制台中打印看下 

 在上图可以看出什么信息呢，那我们罗列下

  • 首先我们看出在new Promise时，需要传入一个回调函数
  • 它是一个类，并且会返回一个Promise对象
  • 那还可以看出它有constructor构造函数，还有catch、finally、then三个方法

那我们根据上述分析出的信息，简单实现一下

javascript复制代码class CustomPromise {
  constructor(callBack) {
  }
  catch() {
  }
  then() {
  }
  finally() {
  }
}
const customPromise = new CustomPromise()
console.log(customPromis)

 那我们再写一个Promise的常规用法

javascript复制代码const promise = new Promise((resolve, reject) => {
  console.log("hellow Promise");
});
console.log(promise);

那我们来看看打印结果，能分析出什么结果

  • hellow promise 在控制台被输出了，那是不是说我们传入的回调函数被立即执行了，那说明传入的是一个执行器

那再改进一下我们的CustomPromise

javascript复制代码class CustomPromise {
  constructor(executor) {
      executor()
  }
  catch() { }
  then() { }
  finally() { }
}
const customPromise = new CustomPromise((resolve, reject) => {
  console.log('hellow Promise')
})
console.log(customPromise)

Promise基本原理与基本特征

那我们来看看我们所熟知的Promise的基本原理

  • 首先我们在调用Promise时，会返回一个Promise对象。
  • 构建Promise对象时，需要传入一个executor函数，Promise的主要业务流程都在executor函数中执行。
  • 如果运行在excutor函数中的业务执行成功了，会调用resolve函数；如果执行失败了，则调用reject函数。
  • Promise的状态不可逆，同时调用resolve函数和reject函数，默认会采取第一次调用的结果。

结合Promise/A+规范，我们还可以分析出哪些基本特征

Promise/A+的规范比较多，在这列出一下核心的规范。Promise/A+规范

  • promise有三个状态：pending，fulfilled，rejected，默认状态是pending。
  • promise有一个value保存成功状态的值，有一个reason保存失败状态的值，可以是undefined/thenable/promise。
  • promise只能从pending到rejected, 或者从pending到fulfilled，状态一旦确认，就不会再改变。
  • promise 必须有一个then方法，then接收两个参数，分别是promise成功的回调onFulfilled, 和promise失败的回调onRejected。
  • 如果then中抛出了异常，那么就会把这个异常作为参数，传递给下一个then的失败的回调onRejected。

那CustomPromise，还实现不了基本原理的3，4两条，那我们来根据基本原理与Promise/A+分析下，还缺少什么

  • promise有三个状态：pending，fulfilled，rejected。
  • executor执行器调用reject与resolve两个方法
  • 还需要有保存成功或失败两个值的变量
  • then接收两个参数，分别是成功的回调onFulfilled,失败的回调onRejected

那再来改进下CustomPromise

javascript复制代码// 定义三个常量表示状态
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
​
class CustomPromise {
  constructor(executor) {
    executor(this.resolve, this.reject);
  }
  // resolve和reject为什么要用箭头函数？
  // 如果直接调用的话，普通函数this指向的是window或者undefined
  // 用箭头函数就可以让this指向当前实例对象
  resolve = (value) => {
    this.value = value;
  };
  reject = (value) => {
    this.reason = value;
  };
  // 成功之后的值
  value = undefined;
  // 失败之后的值
  reason = undefined;
​
  then(onFulfilled,onRejected) {
  }
  catch() {
  }
  finally() {}
}

那我们根据Promise基本原理看看它原生Promise的效果

javascript复制代码new Promise(function (resolve, reject) {
  resolve("成功");
  reject("失败");
}).then(
  (value) => {
    console.log(value); // 结果为‘成功’
  },
  (err) => {
    console.log(err);
  }
);
​
new Promise(function (resolve, reject) {
  reject("失败");
  resolve("成功");
}).then(
  (value) => {
    console.log(value);
  },
  (err) => {
    console.log(err); // 结果为‘失败’
  }
);

可以看出与基本原理一样的效果，那我们分析下如何实现这种效果

  • 需要控制promise状态
  • 在then方法里要调用成功或失败的回调函数
javascript复制代码const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
​
class CustomPromise {
  constructor(executor) {
    executor(this.resolve, this.reject);
  }
  // resolve和reject为什么要用箭头函数？
  // 如果直接调用的话，普通函数this指向的是window或者undefined
  // 用箭头函数就可以让this指向当前实例对象
  resolve = (value) => {
    // promise只能从pending到rejected, 或者从pending到fulfilled
    if (this.status == PENDING) {
      this.status = FULFILLED;
      this.value = value;
    }
  };
  reject = (err) => {
    // promise只能从pending到rejected, 或者从pending到fulfilled
    if (this.status == PENDING) {
      this.status = REJECTED;
      this.reason = err;
    }
  };
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败之后的值
  reason = undefined;
​
  then(onFulfilled, onRejected) {
    // 需要判断状态，根据状态选择处理回调函数
    if (this.status == FULFILLED) {
      onFulfilled(this.value);
    } else if (this.status == REJECTED) {
      onRejected(this.reason);
    }
  }
  catch() {
  }
  finally() {}
}

来测试下CustomPromise

javascript复制代码new CustomPromise(function (resolve, reject) {
  resolve("成功");
  reject("失败");
}).then(
  (value) => {
    console.log(value);// 结果为‘成功’
  },
  (err) => {
    console.log(err);
  }
);
​
new CustomPromise(function (resolve, reject) {
  reject("失败");
  resolve("成功");
}).then(
  (value) => {
    console.log(value);
  },
  (err) => {
    console.log(err);// 结果为‘失败’
  }
);
​

Promise.then链式调用

我们都知到Primose.then是可以链式调用的，那我们先看看原生效果

javascript复制代码const promise = new Promise((resolve, reject) => {
  resolve("start");
});
promise
  .then((res) => {
    console.log(res);
    return new Promise((resolve, reject) => {
     setTimeout(() => {
        resolve("hellow");
     },3000)
    });
  })
  .then((res) => {
    console.log(res);
    return "promise";
  })
  .then((res) => {
    console.log(res);
  });

输出结果

arduino复制代码start
hellow
promise

那我们来分析实现一下

  • 首先.then 是需要返回一个Promise
  • 下一个.then 需要拿到上一个.then的返回值
  • 有异步操作的话，后一个回调函数，会等待该Promise对象的状态发生变化，在被调用
  • 有异步操作的话，那就是说有任务队列，需要有收集回调函数的队列
javascript复制代码const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
​
class CustomPromise {
  constructor(executor) {
    executor(this.resolve, this.reject);
  }
  // resolve和reject为什么要用箭头函数？
  // 如果直接调用的话，普通函数this指向的是window或者undefined
  // 用箭头函数就可以让this指向当前实例对象
  resolve = (value) => {
    // promise只能从pending到rejected, 或者从pending到fulfilled
    if (this.status == PENDING) {
      this.status = FULFILLED;
      this.value = value;
​
      // resolve里面将所有成功的回调拿出来执行
      if (this.onResolvedCallbacks.length) {
        this.onResolvedCallbacks.forEach((fn) => fn());
      }
    }
  };
  reject = (err) => {
    // promise只能从pending到rejected, 或者从pending到fulfilled
    if (this.status == PENDING) {
      this.status = REJECTED;
      this.reason = err;
      // reject里面将所有失败的回调拿出来执行
      if (this.onFulfilledCallbacks.length) {
        this.onFulfilledCallbacks.forEach((fn) => fn());
      }
    }
  };
  // 存储成功回调函数
  onResolvedCallbacks = [];
  // 存储失败回调函数
  onFulfilledCallbacks = [];
​
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败之后的值
  reason = undefined;
​
  then(onFulfilled, onRejected) {
    // 如果不传，就使用默认函数,确保是函数类型
    onFulfilled =
      typeof onFulfilled === "function" ? onFulfilled : (value) => value;
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (reason) => {
            throw reason;
          };
​
    const thenCustomPromise = new CustomPromise((resolve, reject) => {
      const resolveCustomPromise = (callBack, value) => {
        try {
          const x = callBack(value);
          // 如果相等了，说明return的是自己，抛出类型错误并返回
          if (resolveCustomPromise === x) {
            return reject(new TypeError("类型错误"));
          }
          // 判断x是不是 CustomPromise 实例对象
          if (x instanceof CustomPromise) {
            // 执行 x，调用 then 方法，目的是将其状态变为 fulfilled 或者 rejected
            // x.then(value => resolve(value), error => reject(reason))
            // 简化之后
            x.then(resolve, reject);
          } else {
            // 普通值
            resolve(x);
          }
        } catch (error) {
          reject(error);
        }
      };
      // 需要判断状态，根据状态选择处理回调函数
      if (this.status == FULFILLED) {
        resolveCustomPromise(onFulfilled, this.value);
      } else if (this.status == REJECTED) {
        resolveCustomPromise(onRejected, this.reason);
      } else if (this.status == PENDING) {
        // 当状态为pending时,把then回调push进resolve/reject执行队列,等待执行
        this.onResolvedCallbacks.push(() =>
          resolveCustomPromise(onFulfilled, this.value)
        );
        this.onFulfilledCallbacks.push(() =>
          resolveCustomPromise(onRejected, this.reason)
        );
      }
    });
    return thenCustomPromise;
  }
  catch() {}
  finally() {}
}
​

来验证下.then的链式调用

javascript复制代码const promise = new CustomPromise((resolve, reject) => {
  resolve("start");
});
promise
  .then((res) => {
    console.log(res);
    return new CustomPromise((resolve, reject) => {
      setTimeout(() => {
        resolve("hellow");
      }, 1000);
    });
  })
  .then((res) => {
    console.log(res);
    return "promise";
  })
  .then((res) => {
    console.log(res);
  });
// 输出结果 start->hellow->promise

Promise.prototype.catch()

是 .then(null, rejection) 或是 .then(undefined, rejection)的别名，用于指定发生错误时的回调函数

看下原生promise效果

javascript复制代码const promise = new Promise((resolve, reject) => {
  resolve("start");
});
promise
  .then((res) => {
    console.log(res);
    return new Promise((resolve, reject) => {
      reject("hellow");
    });
  })
  .catch(err => {console.log(err); return 'promise'})
  .then(res => console.log(res))

输出结果

arduino复制代码start
hellow
promise

根据上述原生catch我们来分析下结果

  • 执行.then的onRejected回调函数
  • 并且可以继续链式调用
javascript复制代码catch(onFulfilled) {
   return this.then(null, onFulfilled)
}

那我们来验证下

javascript复制代码const promise = new CustomPromise((resolve, reject) => {
  resolve("start");
});
promise
  .then((res) => {
    console.log(res);
    return new CustomPromise((resolve, reject) => {
      reject("hellow");
    });
  })
  .catch((err) => {
    console.log(err);
    return "promise";
  })
  .then((res) => console.log(res));
​
// 输出结果
start
hellow
promise

Promise.resolve()

Promise.resolve(value)返回一个解析过的Promise对象，用法有一个value参数

  • 如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

    javascript复制代码const promise = new Promise((resolve, reject) => {
  resolve("start");
});
​
const resolvePromise = Promise.resolve(promise);
resolvePromise.then((res) => console.log(res)); 
// start

  • 如果参数是 具有then方法的对象Promise.resolve()方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then()方法

    javascript复制代码let thenable = {
  then: function(resolve, reject) {
    resolve('promise');
  }
};
​
let p1 = Promise.resolve(thenable);
p1.then(function (res) {
  console.log(res);  // promise
});

  • 如果参数是一个原始值，或者是一个不具有then()方法的对象，则Promise.resolve()方法返回一个新的 Promise 对象，状态为resolved

    javascript复制代码const p1 = Promise.resolve('promise');
​
p1.then(function (res) {
  console.log(res)
});
// promise

  • Promise.resolve()方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象;

    javascript复制代码const p = Promise.resolve();
​
p.then(function () {
  // ...
});

参考资料：[ECMAScript 入门](https://es6.ruanyifeng.com/#docs/promise#Promise-resolve

来CustomPromise添加静态resolve方法

javascript复制代码//静态的resolve方法
  static resolve(value) {
    if (value instanceof CustomPromise) return value;
    return new CustomPromise((resolve) => resolve(value));
  }

Promise.reject()

Promise.reject(reason) 返回一个Promise实例，并且携带reason

javascript复制代码const promise = Promise.reject("rejected message")
// 相当于
// const promise2 = new Promsie((resolve, reject) => {
//   reject("rejected message")
// })

根据上述例子我们来分析下结果

  • 可以看出无论reason传入什么内容，都是经过reject()方法，那是不是可以理解为就是捕获错误信息

来CustomPromise添加静态reject方法

javascript复制代码//静态的reject方法
static reject(reason) {
   return new CustomPromise((resolve, reject) => reject(reason));
}

Promise.prototype.finally()

finally()不接收参数，并且在.then或.catch回调函数执行完以后，再执行finally中的方法

看下原生promise效果

javascript复制代码const promise = new Promise((resolve, reject) => {
  resolve("start");
});
promise
  .then((res) => {
    console.log(res);
    return new Promise((resolve, reject) => {
      resolve("hellow");
    });
  })
  .then((res) => {
    console.log(res);
    return new Promise((resolve, reject) => {
      resolve("promise");
    });
  })
  .finally(() => {
    console.log("finally");
    return "is finally";
  })
  .then((res) => console.log(res));
​

输出结果

arduino复制代码start
hellow
finally
promise

根据上述原生finally我们来分析下结果

  • finally方法和then以及catch一样，都可以返回一个新的Promise
  • finally并不会影响之前返回的Promise对象
  • 可以继续链式调用并且获取之前Promise的值

来CustomPromise添加静态finally方法

javascript复制代码finally(callback) {
    return this.then(
      (value) => CustomPromise.resolve(callback()).then(() => value),
      (reason) => CustomPromise.resolve(callback()).then(() => reason)
    );
}

那我们来验证下

javascript复制代码const promise = new CustomPromise((resolve, reject) => {
  resolve("start");
});
promise
  .then((res) => {
    console.log(res);
    return new CustomPromise((resolve, reject) => {
      resolve("hellow");
    });
  })
  .then((res) => {
    console.log(res);
    return new CustomPromise((resolve, reject) => {
      resolve("promise");
    });
  })
  .finally(() => {
    console.log("finally");
    return "is finally";
  })
  .then((res) => console.log(res));
​
// 输出结果
start
hellow
finally
promise

Promise.all()

Promise.all() 方法接收一个 promise 的 iterable 类型(Array，Map，Set 都属于 ES6 的 iterable 类型)并返回一个新的Promise实例

看下原生Promise.all()效果

javascript复制代码let p1 = new Promise((resolve, reject) => {
  resolve("start");
}).then((res) => res);
let p2 = new Promise((resolve, reject) => {
  resolve("hellow");
}).then((res) => res);
let p3 = new Promise((resolve, reject) => {
  resolve("promise");
}).then((res) => res);
​
Promise.all([p1, p2, p3])
  .then((res) => console.log("success:", res))
  .catch((err) => console.log("error:", err));
// 输出结果 success:['start', 'hellow', 'promise']

javascript复制代码let p1 = new Promise((resolve, reject) => {
  resolve("start");
}).then((res) => res);
let p2 = new Promise((resolve, reject) => {
  reject("报错了");
}).then((res) => res);
let p3 = new Promise((resolve, reject) => {
  reject("报错了2");
}).then((res) => res);
​
Promise.all([p1, p2, p3])
  .then((res) => console.log("success:", res))
  .catch((err) => console.log("error:", err));
//输出结果 error:报错了

那我们来根据输出结果分析下

  • 成功的时候返回的是一个结果数组
  • 失败的时候则返回最先被reject失败状态的值

来CustomPromise添加静态all()方法

javascript复制代码  //静态的all方法
  static all(values){
    let result = [];
    let index = 0;
    return new CustomPromise((resolve,reject) => {
      function addPromise(key, value) {
        result[key] = value
        index++
        if (index === values.length) {
          resolve(result)
        }
      }
      
      for(let i = 0; i < values.length; i++){
        let item = values[i];
        if(item instanceof CustomPromise){
          // 参数为Promise
          item.then(value => addPromise(i,value), error => reject(reason))
        }else{
          // 参数为普通值
          addPromise(i,item)
        }
      }
    })
  }

那我们来验证下

javascript复制代码let p1 = new CustomPromise((resolve, reject) => {
  resolve("start");
});
let p2 = new CustomPromise((resolve, reject) => {
  resolve("hellow");
});
let p3 = new CustomPromise((resolve, reject) => {
  resolve("promise");
});
​
CustomPromise.all([p1, p2, p3])
  .then((res) => console.log("success:", res))
  .catch((err) => console.log("error:", err));
// 输出结果 success:['start', 'hellow', 'promise']

javascript复制代码let p1 = new CustomPromise((resolve, reject) => {
  resolve("start");
}).then((res) => res);
let p2 = new CustomPromise((resolve, reject) => {
  reject("报错了");
}).then((res) => res);
let p3 = new CustomPromise((resolve, reject) => {
  reject("报错了2");
}).then((res) => res);
​
CustomPromise.all([p1, p2, p3])
  .then((res) => console.log("success:", res))
  .catch((err) => console.log("error:", err));
//输出结果 error:报错了

Promise.race()

Promise.race()方法返回一个 promise，一旦迭代器中的某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝。

javascript复制代码var p1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 300, "start");
});
var p2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, "hellow");
});
​
const p = Promise.race([p1, p2]).then(function(value) {
  console.log(value); // "hellow"
});

来分析下那就是有一个实例先改变状态，p的状态就跟着改变

来CustomPromise添加静态race()方法

javascript复制代码//静态race方法
  static race(values) {
    return new CustomPromise((resolve, reject) => {
      for (const p of values) {
        p.then(resolve, reject);
      }
    });
  }

那我们来验证下

javascript复制代码var p1 = new CustomPromise(function(resolve, reject) {
    setTimeout(resolve, 300, "start");
});
var p2 = new CustomPromise(function(resolve, reject) {
    setTimeout(resolve, 100, "hellow");
});
​
const p = CustomPromise.race([p1, p2]).then(function(value) {
  console.log(value); // "hellow"
});

Promise.allSettled()

Promise.allSettled() 方法不依赖于彼此成功完成的异步任务，不管每一个操作是成功还是失败，再进行下一步操作。

javascript复制代码Promise.allSettled([
  Promise.resolve('start'),
  Promise.reject(new Error("error")),
  new Promise((resolve) => setTimeout(() => resolve('hellow'), 0)),
  'promise',
]).then((values) => console.log(values));
​
// [
//   { status: 'fulfilled', value: start },
//   { status: 'rejected', reason: Error: error },
//   { status: 'fulfilled', value: hellow },
//   { status: 'fulfilled', value: promise }
// ]

来分析下结果

  • status一个字符串，要么是 "fulfilled"，要么是 "rejected"，表示 promise 的最终状态。
  • value当 status 为 "fulfilled"，在 promise 解决时才有 value
  • reason当 status 为 "rejected"，在 promsie 拒绝时才有 reason

来CustomPromise添加静态allSettled()方法

javascript复制代码//静态allSettled方法
  static allSettled(values) {
    return new Promise((resolve, reject) => {
      let resolveDataList = [],
        resolveCount = 0;
      const addPromise = (status, value, i) => {
        resolveDataList[i] = {
          status,
          value,
        };
        resolveCount++;
        if (resolveCount === values.length) {
          resolve(resolveDataList);
        }
      };
      values.forEach((value, i) => {
        if (value instanceof CustomPromise) {
          value.then(
            (res) => {
              addPromise("fulfilled", res, i);
            },
            (err) => {
              addPromise("rejected", err, i);
            }
          );
        } else {
          addPromise("fulfilled", value, i);
        }
      });
    });
  }

来验证下

javascript复制代码CustomPromise.allSettled([
  CustomPromise.resolve('start'),
  CustomPromise.reject(new Error("error")),
  new CustomPromise((resolve) => setTimeout(() => resolve('hellow'), 0)),
  'promise',
]).then((values) => console.log(values));
​
// [
//   { status: 'fulfilled', value: start },
//   { status: 'rejected', reason: Error: error },
//   { status: 'fulfilled', value: hellow },
//   { status: 'fulfilled', value: promise }
// ]

Promise.any()

Promise.any()接收一个由Promise所组成的可迭代对象，返回一个新的promise

javascript复制代码const p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "start");
});
​
const p2 = new Promise((resolve, reject) => {
  reject("报错了");
});
​
const p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, "promise");
});
​
Promise.any([p1, p2, p3]).then((value) => {
  console.log(value);
  // start
})

javascript复制代码const p1 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, "start");
});
​
const p2 = new Promise((resolve, reject) => {
  reject("报错了");
});
​
const p3 = new Promise((resolve, reject) => {
  setTimeout(reject, 500, "promise");
});
​
Promise.any([p1, p2, p3])
  .then((value) => {
    console.log("value:", value);
  })
  .catch((err) => {
    console.log("err:", err); //err: AggregateError: All promises were rejected
  });
​

那我们来分析下

  • 与all()不同，只要有一个 promise 成功，会返回首个成功的 promise 的值，方法提前结束
  • 如果所有Promise都失败，则报错All promises were

来CustomPromise添加静态any()方法

javascript复制代码//静态any方法
  static any(values) {
    return new CustomPromise((resolve, reject) => {
      let rejectCount = 0;
      values.forEach((value) => {
        value.then(
          (val) => resolve(val),
          (err) => {
            rejectCount++;
            if (rejectCount === value.length) {
              reject("All promises were rejected");
            }
          }
        );
      });
    });
  }

我们来验证下

javascript复制代码const p1 = new CustomPromise((resolve, reject) => {
  setTimeout(resolve, 100, "start");
});
​
const p2 = new CustomPromise((resolve, reject) => {
  reject("报错了");
});
​
const p3 = new CustomPromise((resolve, reject) => {
  setTimeout(resolve, 500, "promise");
});
​
CustomPromise.any([p1, p2, p3])
  .then((value) => {
    console.log("value:", value); //value: start
  })
  .catch((err) => {
    console.log("err:", err);
  });

javascript复制代码const p1 = new CustomPromise((resolve, reject) => {
  setTimeout(reject, 100, "start");
});
​
const p2 = new CustomPromise((resolve, reject) => {
  reject("报错了");
});
​
const p3 = new CustomPromise((resolve, reject) => {
  setTimeout(reject, 500, "promise");
});
​
CustomPromise.any([p1, p2, p3])
  .then((value) => {
    console.log("value:", value);
  })
  .catch((err) => {
    console.log("err:", err); //err: All promises were rejected
  });

完整代码

javascript复制代码const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
​
class CustomPromise {
  constructor(executor) {
    try {
      executor(this.resolve, this.reject);
    } catch (error) {
      // 如果有错误，就直接执行 reject
      this.reject(error);
    }
  }
  // resolve和reject为什么要用箭头函数？
  // 如果直接调用的话，普通函数this指向的是window或者undefined
  // 用箭头函数就可以让this指向当前实例对象
  resolve = (value) => {
    // promise只能从pending到rejected, 或者从pending到fulfilled
    if (this.status == PENDING) {
      this.status = FULFILLED;
      this.value = value;
​
      // resolve里面将所有成功的回调拿出来执行
      if (this.onResolvedCallbacks.length) {
        this.onResolvedCallbacks.forEach((fn) => fn());
      }
    }
  };
  reject = (err) => {
    // promise只能从pending到rejected, 或者从pending到fulfilled
    if (this.status == PENDING) {
      this.status = REJECTED;
      this.reason = err;
      // reject里面将所有失败的回调拿出来执行
      if (this.onFulfilledCallbacks.length) {
        this.onFulfilledCallbacks.forEach((fn) => fn());
      }
    }
  };
  // 存储成功回调函数
  onResolvedCallbacks = [];
  // 存储失败回调函数
  onFulfilledCallbacks = [];
​
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败之后的值
  reason = undefined;
​
  then(onFulfilled, onRejected) {
    // 如果不传，就使用默认函数,确保是函数类型
    onFulfilled =
      typeof onFulfilled === "function" ? onFulfilled : (value) => value;
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (reason) => {
            throw reason;
          };
​
    const thenCustomPromise = new CustomPromise((resolve, reject) => {
      const resolveCustomPromise = (callBack, value) => {
        try {
          const x = callBack(value);
          // 如果相等了，说明return的是自己，抛出类型错误并返回
          if (resolveCustomPromise === x) {
            return reject(new TypeError("类型错误"));
          }
          // 判断x是不是 CustomPromise 实例对象
          if (x instanceof CustomPromise) {
            // 执行 x，调用 then 方法，目的是将其状态变为 fulfilled 或者 rejected
            // x.then(value => resolve(value), error => reject(reason))
            // 简化之后
            x.then(resolve, reject);
          } else {
            // 普通值
            resolve(x);
          }
        } catch (error) {
          reject(error);
        }
      };
      // 需要判断状态，根据状态选择处理回调函数
      if (this.status == FULFILLED) {
        resolveCustomPromise(onFulfilled, this.value);
      } else if (this.status == REJECTED) {
        resolveCustomPromise(onRejected, this.reason);
      } else if (this.status == PENDING) {
        // 当状态为pending时,把then回调push进resolve/reject执行队列,等待执行
        this.onResolvedCallbacks.push(() =>
          resolveCustomPromise(onFulfilled, this.value)
        );
        this.onFulfilledCallbacks.push(() =>
          resolveCustomPromise(onRejected, this.reason)
        );
      }
    });
    return thenCustomPromise;
  }
  catch(onFulfilled) {
    return this.then(null, onFulfilled);
  }
  finally(callback) {
    return this.then(
      (value) => CustomPromise.resolve(callback()).then(() => value),
      (reason) => CustomPromise.resolve(callback()).then(() => reason)
    );
  }
  //静态的resolve方法
  static resolve(value) {
    if (value instanceof CustomPromise) return value;
    return new CustomPromise((resolve) => resolve(value));
  }
  //静态的reject方法
  static reject(reason) {
    return new CustomPromise((resolve, reject) => reject(reason));
  }
  //静态的all方法
  static all(values) {
    // 用来记录Promise成功的次数
    let resolveCount = 0,
      // 用来保存Promise成功的结果
      resolveDataList = [];
    return new CustomPromise((resolve, reject) => {
      function addPromise(key, value) {
        resolveDataList[key] = value;
        resolveCount++;
        if (resolveCount === values.length) {
          resolve(resolveDataList);
        }
      }
​
      for (let i = 0; i < values.length; i++) {
        let item = values[i];
        if (item instanceof CustomPromise) {
          // 参数为Promise
          item.then(
            (value) => addPromise(i, value),
            (error) => reject(error)
          );
        } else {
          // 参数为普通值
          addPromise(i, item);
        }
      }
    });
  }
  //静态race方法
  static race(values) {
    return new CustomPromise((resolve, reject) => {
      for (const p of values) {
        p.then(resolve, reject);
      }
    });
  }
  //静态allSettled方法
  static allSettled(values) {
    return new Promise((resolve, reject) => {
      let resolveDataList = [],
        resolveCount = 0;
      const addPromise = (status, value, i) => {
        resolveDataList[i] = {
          status,
          value,
        };
        resolveCount++;
        if (resolveCount === values.length) {
          resolve(resolveDataList);
        }
      };
      values.forEach((value, i) => {
        if (value instanceof CustomPromise) {
          value.then(
            (res) => {
              addPromise("fulfilled", res, i);
            },
            (err) => {
              addPromise("rejected", err, i);
            }
          );
        } else {
          addPromise("fulfilled", value, i);
        }
      });
    });
  }
  //静态any方法
  static any(values) {
    return new CustomPromise((resolve, reject) => {
      let rejectCount = 0;
      values.forEach((value) => {
        value.then(
          (val) => resolve(val),
          (err) => {
            rejectCount++;
            if (rejectCount === value.length) {
              reject("All promises were rejected");
            }
          }
        );
      });
    });
  }
}

结语

关于Promise的实现就到这里了，希望能跟大家一起进步⛽️⛽️⛽️

如果写的有问题，欢迎大家指出问题，一起讨论，让我再打磨打磨

最后呢，希望大家支持一下，长文不易，记得给点个赞👍👍👍

QQdd_
关注
专栏目录
前端知识点之promise
weixin_45362626的博客
07-14 840
Promise 是异步编程的一种更优雅的解决方案，比传统的解决方案——回调函数——更合理和更强大
Promise实现原理
爱与自由，一生所求
03-29 356
// 判断变量否为function const isFunction = variable => typeof variable === "function"; // 定义Promise的三种状态常量 const PENDING = "PENDING"; const FULFILLED = "FULFILLED...
30分钟，让你彻底明白Promise原理
嘿嘿
05-16 444
前言 前一阵子记录了promise的一些常规用法，这篇文章再深入一个层次，来分析分析promise的这种规则机制是如何实现的。ps:本文适合已经对promise的用法有所了解的人阅读,如果对其用法还不是太了解，可以移步我的上一篇博文。 本文的promise源码是按照Promise/A+规范来编写的（不想看英文版的移步Promise/A+规范中文翻译） 引子 为了让大家更容易理解，我们从一个场景开始讲解，让大家一步一步跟着思路思考，相信你一定会更容易看懂。 考虑下面一种获取用户id的请求处理 /
Promise的实现原理（一）
smz8023的博客
09-14 746
Promise的实现原理（一） 1.先说一下用法，根据用法来一步步实现； 1.1 简单使用 // 传如一个函数，函数里有两个参数，resolve，reject new Promise((resolve,reject)=>{ // 成功就调用 resolve() }) 1.1.1 来实现我们自己的Mypromise class Mypromise { // executor 执行者，也就是调用方传过来的函数，他是立即执行的 constructor(executor){ // exe
前端页面的promise学习(附有实例讲解)
一只努力搬砖的打工妹纸
05-20 789
在学习promise之前，首先先简单介绍一下同步和异步: 为什么存在同步和异步？ 由于JavaScript的单线程特点，因此同个时间只能处理同个任务，所有任务都需要排队，前一个任务执行完，才能继续执行下一个任务，但是，若是前一个任务的执行时间很长，如文件读取等，则后一个任务就会一直在那里等着，这样会严重影响用户体验。为了解决这个问题，主线程可以完全不用等待文件的读取完毕或其它任务完成，可以先挂起处于等待中的任务，先运行排在后面的任务，等到文件的读取等任务有了结果之后，再回过头执行挂起的任务...
快速理解promise原理
godman0211的博客
03-15 191
Promise是一种常见的异步编程模式，用于处理JavaScript中的异步操作。它可以让我们更方便地处理异步操作，避免回调地狱的问题。但是，如果你还没有完全理解Promise的工作原理，那么本文将帮助你理解Promise的背后。Promise是一种有效的异步编程方式。它解决了回调地狱问题，并提供了清晰、简洁的代码结构。Promise可以轻松处理各种异步场景，例如Ajax请求、文件读取、定时器等。使用Promise需要注意，在异步操作完成后必须要设置状态，否则Promise将永远处于pending状态。
超详细！基于 Apriori 关联规则挖掘算法实现商品购物篮分析（数据+代码+5k字项目报告）
03-15
首先，我们要理解 Apriori 算法的基本原理。Apriori 算法基于“频繁集”概念，即如果一个项集经常出现在数据库中，那么它的所有子集也必须频繁。它通过两阶段过程进行：(1) 构建频繁项集，(2) 生成关联规则。在构建...
PB实现向仰邦BX_5K2控制卡发送动态文字
05-07
标题中的“PB实现向仰邦BX_5K2控制卡发送动态文字”指的是使用PowerBuilder（简称PB）编程语言来编写程序，目的是控制仰邦BX_5K2型LED显示屏控制卡显示动态文本。PB是一种面向对象的可视化编程工具，尤其在数据库...
蜂鸣器和弦音实现基于瑞萨单片机实现电路+代码.rar_roof5k5_和弦音_瑞萨_蜂鸣器和弦音_蜂鸣器和弦音实现基于瑞萨单片机
09-15
首先，我们要理解蜂鸣器的工作原理。蜂鸣器分为有源和无源两种类型。有源蜂鸣器自带振荡电路，可以直接通过数字信号驱动产生声音；而无源蜂鸣器则需要外部电路提供特定频率的交流电压才能发声。在单片机应用中，通常...
小红书最热门的领域和最强的变现方式，5K字详解.pdf
08-27
对于想要在这个平台上开启副业或创业的人来说，选择一个明确的账号定位，持续产出高质量内容，结合有效的变现策略，便有可能实现从0到1的突破，获取额外收入。同时，紧跟平台热门领域，如美妆、家居、母婴，结合自身...
IIIT5K OCR 场景文本识别 lmdb格式数据集
03-13
IIIT5K OCR 场景文本识别lmdb格式数据集是一种广泛用于光学字符识别（OCR）研究和训练的重要资源。这个数据集包含了5000张含有场景文本的图像，旨在帮助开发和评估OCR系统在实际环境中的表现。OCR技术是计算机视觉...
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 391
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
easyexcel模板导出并且公式自动计算的方法
weixin_47615289的博客
09-11 450
【代码】easyexcel模板导出并且公式自动计算的方法。
JS笔记
2201_76100326的博客
09-11 523
Math对象属于Javascript内置对象，无需实例化（不需要添加new ），可以直接使用。只有一个Math.PI的属性。
uniapp中实现＜text＞文本内容点击可复制或拨打电话
最新发布
GoppViper的博客
09-16 239
标签时，会弹出一个操作菜单，用户可以选择复制电话号码或者直接拨打该号码。uni.setClipboardData用于实现复制功能，uni.makePhoneCall用于实现拨打电话功能。在上述代码中，当点击包含电话的。template 部分。
WebGL系列教程六（纹理映射与立方体贴图）
AIGIS的博客
09-12 1254
上一讲我们讲了如何使用索引绘制彩色立方体，还留了一个思考题：怎么让立方体的每个面都保持一个颜色?这一讲我们就来解决这个问题，并引出纹理映射和立方体贴图。其实这个词语还是比较好理解。见名知意，大概意思就是把纹理映射到某个地方，纹理是什么？现在你可以简单的认为纹理就是一张图片。把一张二维的图片映射到一个三维物体的表面，就叫纹理映射。本节我们从如何将立方体每个面的颜色改为相同的颜色开始，介绍到了如何将图片贴到立方体的表面，系统的分析了为什么不能再共用顶点，并将代码进行了修改，以及讲解了纹理坐标的使用。
Vue3中slot插槽的几种使用实践
小小默：进无止境
09-14 539
父组件子组件父组件中Category 组件标签内的东西将会呈现在子组件slot的位置（进行替换）。
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 1352
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
yolov5k-means 聚类锚框原理
03-27
yolov5k-means聚类锚框原理是一种用于目标检测的算法，它通过对训练数据中的真实边界框进行聚类，得到一组最佳的锚框尺寸和比例，以提高检测准确性和速度。 具体来说，yolov5k-means聚类锚框原理的步骤如下： 1. ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值