js之手写Promise代码-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_56696697/article/details/131077383

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1.基本构造
      function myPromise(excutor) {
        let self = this;
        self.status = "pending";
        self.value = null;
        self.reason = null;
        self.onFulfilledCallbacks = [];
        self.onRejectedCallbacks = [];
        function resolve(value) {
          // 成功回调
          if (self.status === "pending") {
            self.value = value;
            self.status = "fulfilled";
            // 状态改变依次取出
            self.onFulfilledCallbacks.forEach((item) => item(value));
          }
        }
        // 失败回调
        function reject(reason) {
          if (self.status === "pending") {
            self.reason = reason;
            self.status = "rejected";
            // 状态改变依次取出
            self.onRejectedCallbacks.forEach((item) => item(reason));
          }
        }
        // 2.先执行
        try {
          excutor(resolve, reject);
        } catch (err) {
          reject(err);
        }
      }
      // 3.then()放在原型上面
      myPromise.prototype.then = function (onFulfilled, onRejected) {
        onFulfilled =
          typeof onFulfilled === "function"
            ? onFulfilled
            : function (data) {
                resolve(data);
              };
        onRejected =
          typeof onRejected === "function"
            ? onRejected
            : function (err) {
                throw err;
              };
        //   使promise支持异步--发布订阅模式
        let self = this;
        if (self.status === "pending") {
            // 存入数组
          self.onFulfilledCallbacks.push(onFulfilled);
          self.onRejectedCallbacks.push(onRejected);
        }
        // console.log(this.status);
      };
      let demo = new myPromise((resolve, reject) => {
        console.log("成功输出!");
        setTimeout(() => {
          // 异步执行
          resolve(1);
        }, 1000);
      });
//调用then使用
      demo.then((data) => console.log(data));
    // 成功编写Promise
    </script>
  </body>
</html>