promise A+ 规范 

<!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>promise A+ 规范</title>
  </head>
  <body>
    <script>
      let a = `每一个异步场景都可以看做是一个任务，这个任务分为两个阶段 三个状态
                unsettled 未决阶段   settled 已决阶段 pending 等待  fulfilled 成功态 rejected 失败态`;
      let b = `各个阶段和各个状态间不可逆转，状态始终是由 pending => fulfilled 或 rejected`;
      let c = `将任务由未决的 pending 状态推向已决的fulfilled状态，这个行为叫做 resolve；推向已决的rejected状态，这个行为叫 reject；`;
      let d = `每个异步任务必须提供一个then方法来处理成功后的数据或失败后的原因；then方法规定了有两个参数， onFulfilled onRejected`;
    </script>
    <script>
      const PENDING = 'pending';
      const FULFILLED = 'fulfilled';
      const REJECTED = 'rejected';
      // promise是一个类，他接受一个函数作为参数
      class myPromise {
        constructor(executor) {
          this.status = PENDING;
          this.dispatchers = [];
          this.data = null;
          this.reason = null;
          try {
            executor(this.__resolve.bind(this), this.reject.bind(this));
          } catch (err) {
            this.__reject(err);
          }
        }
        __updataStatus(newStatus) {
          if (this.status !== PENDING) return;
          this.status = newStatus;
        }
        __resolve(data) {
          this.__updataStatus(FULFILLED);
          this.data = data;
          this.__executeDispatchers();
        }

        __executeDispatchers({ dispatcher, status }) {
          if (this.status === PENDING) return;
          for (const dispatcherConf of dispatchers) {
            this.__executeDispatcher(dispatcherConf);
          }
        }

        __executeDispatcher({ dispatcher, status, resolve, reject }) {
          if (this.status !== status) {
            return;
          }
          if (typeof dispatcher !== 'function') {
            this.status === FULFILLED ? resolve(this.data) : reject(this.data);
            return;
          }
          // dispatcher已经是一个函数了
          try {
            const result = dispatcher(this.status === FULFILLED ? this.data : this.reason); // 如果是fulfilled 我们就把 data 传进去，如果是 rejected 我们就要把 reason 传进去；
            resolve(result);
          } catch (err) {
            reject(err);
          }
        }
        __reject(reason) {
          this.__updataStatus(REJECTED);
          this.reason = reason;
          this.__executeDispatchers();
        }
        then(onFulfilled, onRejected) {
          return new myPromise((resolve, reject) => {
            this.dispatchers.push(
              {
                status: FULFILLED,
                dispatcher: onFulfilled,
                reject,
                resolve
              },
              {
                status: REJECTED,
                dispatcher: onRejected,
                reject,
                resolve
              }
            );
          });
        }
        catch(onRejected) {
          return this.then(null, onRejected);
        }
      }

      const myPro = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(111);
        }, 1000);
      });
      myPro.then().then(r => {
        console.log('r', r);
      });
    </script>
  </body>
</html>

 

posted @ 2022-05-04 14:23  苹果π  阅读(41)  评论(0)    收藏  举报