饥人谷Wiki

====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

--- javascript_手写promise [2021/09/23 11:31]
若愚创建
+++ javascript_手写promise [2022/04/06 22:33] (当前版本)
若愚
@@ 行 1: / 行 1: @@
 # 手写Promise
-代码比较短的实现
 ```javascript
-const states = {
+const PENDING = "PENDING";
-: 'pending',
+const FULFILLED = "FULFILLED";
-: 'fulfilled',
+const REJECTED = "REJECTED";
-: 'rejected'
+function resolve(value) {
+  return value;
 }
-function MyPromise (cb) {
-  if (typeof cb!== 'function') {
+function reject(err) {
-    throw new TypeError('callback must be a function')
+  throw err;
-  }
+}
-  let state = states[0]
-  let value = null
+function resolvePromise(promise2, x, resolve, reject) {
-  let handlers = []
+  if (promise2 === x) {
-  function fulfill (result) {
+    return reject(
-    state = states[1]
+      new TypeError("Chaining cycle detected for promise #<Promise>")
-    value = result
+    );
-    handlers.forEach(handle)
-    handlers = null
   }
-  function reject (error) {
+  let called;
-    state = states[2]
+  if ((typeof x === "object" && x != null) || typeof x === "function") {
-    value = error
-    handlers.forEach(handle)
-    handlers = null
-  }
-  function resolve (value) {
     try {
-      let then = getThen(value)
+      let then = x.then;
-      if (then) {
+      if (typeof then === "function") {
-        resolveAnotherPromise(then.bind(value), resolve, reject)
+        then.call(
-        return
+          x,
+          (y) => {
+            if (called) return;
+            called = true;
+            resolvePromise(promise2, y, resolve, reject);
+          },
+          (r) => {
+            if (called) return;
+            called = true;
+            reject(r);
+          }
+        );
+      } else {
+        resolve(x);
       }
-      fulfill(value)
+    } catch (e) {
-    } catch (err) {
+      if (called) return;
-      reject(err)
+      called = true;
+      reject(e);
     }
+  } else {
+    resolve(x);
   }
-  function handle (handler) {
+}
-    if (state === states[0]) handlers.push(handler)
-    else {
+class Promise {
-      if (state === states[1] &&
+  constructor(executor) {
-          typeof handler.onFulfill === 'function') {
+    this.status = PENDING;
-        handler.onFulfill(value)
+    this.value = undefined;
+    this.reason = undefined;
+    this.resolveCallbacks = [];
+    this.rejectCallbacks = [];
+    let resolve = (value) => {
+      if (this.status === PENDING) {
+        this.status = FULFILLED;
+        this.value = value;
+        this.resolveCallbacks.forEach((fn) => fn());
       }
-      if (state === states[2] &&
+    };
-          typeof handler.onReject === 'function') {
-        handler.onReject(value)
+    let reject = (reason) => {
+      if (this.status === PENDING) {
+        this.status = REJECTED;
+        this.reason = reason;
+        this.rejectCallbacks.forEach((fn) => fn());
       }
+    };
+    try {
+      executor(resolve, reject);
+    } catch (error) {
+      reject(error);
     }
   }
-  this.done = function (onFulfill, onReject) {
-    setTimeout(() => handle(onFulfill, onReject), 0)
+  then(onFulfilled, onRejected) {
-  }
+    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : resolve;
-  this.then = function (onFulfill, onReject) {
+    onRejected = typeof onRejected === "function" ? onRejected : reject;
-    let self = this
+    let promise2 = new Promise((resolve, reject) => {
-    return new Promise((resolve, reject) => {
+      if (this.status === FULFILLED) {
-      return self.done(result => {
+        setTimeout(() => {
-        if (typeof onFulfill === 'function') {
           try {
-            return resolve(onFulfill(result))
+            let x = onFulfilled(this.value);
-          } catch (err) {
+            resolvePromise(promise2, x, resolve, reject);
-            return reject(err)
+          } catch (e) {
+            reject(e);
           }
-        } else {
+        }, 0);
-          return resolve(result)
+      }
-        }
-      }, error => {
+      if (this.status === REJECTED) {
-        if (typeof onReject === 'function') {
+        setTimeout(() => {
           try {
-            return resolve(onReject(error))
+            let x = onRejected(this.reason);
-          } catch (err) {
+            resolvePromise(promise2, x, resolve, reject);
-            return reject(err)
+          } catch (e) {
+            reject(e);
           }
-        } else {
+        }, 0);
-          return reject(error)
+      }
-        }
-      })
+      if (this.status === PENDING) {
-    })
+        this.resolveCallbacks.push(() => {
-  }
+          setTimeout(() => {
-}
+            try {
-function getThen (value) {
+              let x = onFulfilled(this.value);
-  if (typeof(value) === 'object'
+              resolvePromise(promise2, x, resolve, reject);
-      || typeof(value) === 'function') {
+            } catch (e) {
-    let then = value.then
+              reject(e);
-    if (typeof(then) === 'function') return then
+            }
-  }
+          }, 0);
-  return null
+        });
-}
+        this.rejectCallbacks.push(() => {
+          setTimeout(() => {
+            try {
+              let x = onRejected(this.reason);
+              resolvePromise(promise2, x, resolve, reject);
+            } catch (e) {
+              reject(e);
+            }
+          }, 0);
+        });
+      }
+    });
-function resolveAnotherPromise (cb, Onfulfill, Onreject) {
+    return promise2;
-  let finished = false
-  try {
-    cb(value => {
-      if (finished) return
-      finished = true
-      Onfulfill(value)
-    }, reason => {
-      if (finished) return
-      finished = true
-      Onreject(reason)
-    })
-  } catch (err) {
-    if (finished) return
-    finished = true
-    Onreject(err)
   }
-}
 }
 ```
+更标准的实现
+https://github.com/taylorhakes/promise-polyfill

饥人谷Wiki

站点工具

用户工具

页面工具