聊一聊Promise

1
// 使用promise来包装任务
2
const req1P = () => {
3
  return new Promise((resolve) => {
4
    req1(() => {
5
      resolve("req1");
6
    });
7
  });
8
};
9
const req2P = () => {
10
  return new Promise((resolve) => {
11
    req2(() => {
12
      resolve("req2");
13
    });
14
  });
15
};
16
const req3P = () => {
17
  return new Promise((resolve) => {
18
    req3(() => {
19
      resolve("req3");
20
    });
21
  });
22
};
23

24
req1P()
25
  .then((msg1) => {
26
    return req2P().then((msg2) => {
27
      return [msg1, msg2];
28
    });
29
  })
30
  .then((msgs) => {
31
    return req3P().then((msg3) => {
32
      return [...msgs, msg3];
33
    });
34
  })
35
  .then((msgs) => {
36
    console.log(msgs);
37
  });

1
function queueTask(fn) {
2
  setTimeout(fn);
3
}
4
class PdPromise {
5
  static PENDING = "pending";
6
  static FULFILLED = "fulfilled";
7
  static REJECTED = "rejected";
8

9
  #status = PdPromise.PENDING;
10
  #value = null;
11
  #reason = null;
12

13
  #fulfilledCallbacks = [];
14
  #rejectedCallbacks = [];
15

16
  constructor(executor) {
17
    try {
18
      executor(this.resolve, this.reject);
19
    } catch (e) {
20
      this.reject(e);
21
    }
22
  }
23
  resolve = (value) => {
24
    if (this.#status !== PdPromise.PENDING) return;
25
    /**
26
     * 如果value是一个promise,那么这个Promise实例会根据value这个Promise的解决时机进行reslove或者reject
27
     * 此处逻辑并不在规范之内,但是原生的Promise的行为是这样的,所以我们加上
28
     *  */
29
    if (value instanceof PdPromise) {
30
      return value.then(
31
        (value) => this.resolve(value),
32
        (reason) => this.reject(reason)
33
      );
34
    }
35
    this.#status = PdPromise.FULFILLED;
36
    this.#value = value;
37
    this.#fulfilledCallbacks.forEach((fn) => fn());
38
  };
39
  reject = (reason) => {
40
    if (this.#status !== PdPromise.PENDING) return;
41
    this.#status = PdPromise.REJECTED;
42
    this.#reason = reason;
43
    this.#rejectedCallbacks.forEach((fn) => fn());
44
  };
45
  then = (onfulfilled, onrejected) => {
46
    const onfulfilledBak = onfulfilled;
47
    const onrejectedBak = onrejected;
48

49
    onfulfilled = typeof onfulfilled === "function" ? onfulfilled : () => this.#value;
50
    onrejected = typeof onrejected === "function" ? onrejected : () => this.#reason;
51
    const promise = new PdPromise((resolve, reject) => {
52
      const resolveValue = (value) => {
53
        if (typeof onfulfilledBak === "function") {
54
          const x = onfulfilled(value);
55
          resolvePromise(promise, x, resolve, reject);
56
        } else {
57
          resolve(value);
58
        }
59
      };
60

61
      if (this.#status === PdPromise.FULFILLED) {
62
        queueTask(() => {
63
          try {
64
            resolveValue(this.#value);
65
          } catch (e) {
66
            reject(e);
67
          }
68
        });
69
      }
70
      if (this.#status === PdPromise.REJECTED) {
71
        queueTask(() => {
72
          try {
73
            if (typeof onrejectedBak === "function") {
74
              const x = onrejected(this.#reason);
75
              resolvePromise(promise, x, resolve, reject);
76
            } else {
77
              reject(this.#reason);
78
            }
79
          } catch (e) {
80
            reject(e);
81
          }
82
        });
83
      }
84
      if (this.#status === PdPromise.PENDING) {
85
        this.#fulfilledCallbacks.push(() =>
86
          queueTask(() => {
87
            try {
88
              resolveValue(this.#value);
89
            } catch (e) {
90
              reject(e);
91
            }
92
          })
93
        );
94
        this.#rejectedCallbacks.push(() =>
95
          queueTask(() => {
96
            try {
97
              if (typeof onrejectedBak === "function") {
98
                const x = onrejected(this.#reason);
99
                resolvePromise(promise, x, resolve, reject);
100
              } else {
101
                reject(this.#reason);
102
              }
103
            } catch (e) {
104
              reject(e);
105
            }
106
          })
107
        );
108
      }
109
    });
110
    return promise;
111
  };
112
}
113
function resolvePromise(promise, x, resolve, reject) {
114
  if (promise === x) {
115
    return reject(new TypeError("The promise and the return value are the same"));
116
  }
117

118
  if (x !== null && (typeof x === "function" || typeof x === "object")) {
119
    let then;
120
    try {
121
      then = x.then;
122
    } catch (e) {
123
      reject(e);
124
    }
125
    // 如果then是一个函数,我们就理解这个x是一个promise
126
    if (typeof then === "function") {
127
      let called = false;
128
      try {
129
        then.call(
130
          x,
131
          function (y) {
132
            if (called) return;
133
            called = true;
134
            resolvePromise(promise, y, resolve, reject);
135
          },
136
          function (r) {
137
            if (called) return;
138
            called = true;
139
            reject(r);
140
          }
141
        );
142
      } catch (e) {
143
        if (called) return;
144
        reject(e);
145
      }
146
    } else {
147
      // 如果then不是一个函数,说明x只是有一个then属性普通对象
148
      resolve(x);
149
    }
150
  } else {
151
    resolve(x);
152
  }
153
}
154
PdPromise.deferred = function () {
155
  var result = {};
156
  result.promise = new PdPromise(function (resolve, reject) {
157
    result.resolve = resolve;
158
    result.reject = reject;
159
  });
160
  return result;
161
};
162
module.exports = PdPromise;