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 = `1:每个异步操作都被看做一个任务，每个任务都分为两个阶段和三个状态，分别是 unsettled 未决阶段 settled 已决阶段，pending 等待态 fulfilled 成功态
                  rejected 失败态；
               2:任务的各个状态不可逆转，只能由 pending 转为 fulfilled 或 rejected
               3:由 unsettled 未决阶段转为 settled 已决阶段中，由pending 转化为 fulfilled 的行为称之为 resolve，转化为 rejected 的行为称之为 reject
               4:任务都会提供一个then方法，它有两个参数，分别是onFulfilled 和 onRejected`;
      const PENDING = 'pending';
      const FULFILLED = 'fulfilled';
      const REJECTED = 'rejected';
      class myPromise {
        constructor(executor) {
          this.status = PENDING;
          this.data = null;
          this.reason = null;
          this.dispatchers = [];
          try {
            executor(this.__resolve.bind(this), this.__reject.bind(this));
          } catch (err) {
            this.__reject(err);
          }
        }
        __resolve(data) {
          if (this.status !== PENDING) return;
          this.status = FULFILLED;
          this.data = data;
          this.__dispatchers();
        }
        __reject(reason) {
          if (this.status !== PENDING) return;
          this.status = REJECTED;
          this.reason = reason;
          this.__dispatchers();
        }
        __dispatchers() {
          if (this.status === PENDING) return;
          for (const dispatcherConf of this.dispatchers) {
            this.__dispatcher(dispatcherConf);
          }
        }
        __dispatcher({ status, dispatcher, resolve, reject }) {
          if (this.status !== status) return;
          if (typeof dispatcher !== 'function') {
            this.status === FULFILLED ? resolve(this.data) : reject(this.data);
            return;
          }
          try {
            const result = dispatcher(this.status === FULFILLED ? this.data : this.reason);
            resolve(result);
          } catch (err) {
            reject(err);
          }
        }
        then(onFulfiled, onRejected) {
          return new myPromise((resolve, reject) => {
            this.dispatchers.push(
              {
                status: FULFILLED,
                dispatcher: onFulfiled,
                resolve,
                reject
              },
              {
                status: REJECTED,
                dispatcher: onRejected,
                resolve,
                reject
              }
            );
            this.__dispatchers();
          });
        }
        catch(onRejected) {
          return this.then(null, onRejected);
        }
      }

      const pro = new myPromise((resolve, reject) => {
        setTimeout(function () {
          resolve(123);
        }, 1000);
      });
      pro.then(r => {
        console.log(r);
      });
    </script>
  </body>
</html>

 

posted @ 2022-05-06 18:08  苹果π  阅读(22)  评论(0)    收藏  举报