三个状态

Promises/A+ 规范

promise对象

then 方法链式实现

  1. promise = 
  2. {
  3.   then: function(callback) {
  4.         callback();
  5.   }
  6. }

手写实现

:::info 使用 hack 先实现 resolve 时，callback 已经经过 then 中 callback = cb :::

  1. function Promise(fn) {
  2.   var callback = null;
  4.   this.then = function (cb) {
  5.     callback = cb;
  6.   };
  8.   function resolve(value) {
  9.     setTimeout(function () {
  10.       // hack
  11.       callback(value);
  12.     }, 0);
  13.   }
  15.   fn(resolve);
  16. }
  18. var p = new Promise((resolve) => {
  19.   resolve(666);
  20. }).then((data) => {
  21.   console.log("Got a value: " + data);
  22. });

:::info 使用 promise 状态，不使用 hack 方法 :::

  1. function Promise(fn) {
  2.   var state = "pending";
  3.   var value;
  5.   this.then = function (onResolved) {
  6.     handle(onResolved);
  7.   };
  9.   function resolve(newValue) {
  10.     value = newValue; // value -> 666
  11.     state = "resolved"; // pending -> resolved
  12.   }
  14.   function handle(onResolved) {
  15.     onResolved(value);
  16.   }
  18.   fn(resolve); // 在 new 的时候执行 resolve
  19. }
  21. var p = new Promise((resolve) => {
  22.   resolve(666);
  23. }).then((data) => {
  24.   console.log("Got a value: " + data);
  25. });

:::info 实现链式操作，每个 then 都会返回 promise 对象 :::

  1. function Promise(fn) {
  2.   var state = "pending";
  3.   var value;
  5.   function resolve(newValue) {
  6.     value = newValue;
  7.     state = "resolved";
  8.   }
  10.   function handle(handler) {
  11.     if (!handler.onResolved) { // 处理只调用 then 没传 onResolved 函数，让下一个 then 可以接
  12.       handler.resolve(value);
  13.       return;
  14.     }
  16.     var returnValue = handler.onResolved(value);
  17.     handler.resolve(returnValue);
  18.   }
  20.   this.then = function (onResolved) {
  21.     return new Promise(function (resolve) { // 每个 then 都会返回 promise 对象
  22.       handle({
  23.         onResolved: onResolved,
  24.         resolve: resolve,
  25.       });
  26.     });
  27.   };
  29.   fn(resolve);
  30. }
  32. var p = new Promise((resolve) => {
  33.   resolve(666);
  34. })
  35.   .then()
  36.   .then((data) => {
  37.     console.log("Got a value: " + data);
  38.     return 88;
  39.   })
  40.   .then((secondResult) => {
  41.     console.log(secondResult);
  42.   });

:::info 处理 then 返回 promise 而不是 原始值 的情况，用 then 即可以取回值 :::

  1. function Promise(fn) {
  2.   var state = "pending";
  3.   var value;
  5.   function resolve(newValue) {
  6.     value = newValue;
  7.     state = "resolved";
  8.   }
  10.   function handle(handler) {
  11.     if (!handler.onResolved) {
  12.       handler.resolve(value);
  13.       return;
  14.     }
  16.     var returnValue = handler.onResolved(value);
  17.     handler.resolve(returnValue);
  18.   }
  20.   this.then = function (onResolved) {
  21.     return new Promise(function (resolve) {
  22.       handle({
  23.         onResolved: onResolved,
  24.         resolve: resolve,
  25.       });
  26.     });
  27.   };
  29.   fn(resolve);
  30. }
  32. function doSomething() {
  33.   return new Promise(function (resolve) {
  34.     resolve(666);
  35.   });
  36. }
  38. function doSomethingElse(value) {
  39.   return new Promise(function (resolve) {
  40.     resolve("did something else with " + value);
  41.   });
  42. }
  44. var p = doSomething()
  45.   .then()
  46.   .then((data) => {
  47.     console.log("Got a value: " + data);
  49.     return doSomethingElse(data);
  50.   })
  51.   .then((anotherPromise) => {
  52.     anotherPromise.then(function(value){ // 如果是返回的是 promise 还要用 then 
  53.       console.log("Got anotherPromise: " + value);
  54.     })
  55.   });
  1. function Promise(fn) {
  2.   var state = "pending";
  3.   var value;
  5.   function resolve(newValue) {
  6.     if (newValue && typeof newValue.then === "function") { // 递归处理 resolve return 是 promise
  7.       newValue.then(resolve);
  8.       return;
  9.     }
  11.     value = newValue;
  12.     state = "resolved";
  13.   }
  15.   function handle(handler) {
  16.     if (!handler.onResolved) {
  17.       handler.resolve(value);
  18.       return;
  19.     }
  21.     var returnValue = handler.onResolved(value);
  22.     handler.resolve(returnValue);
  23.   }
  25.   this.then = function (onResolved) {
  26.     return new Promise(function (resolve) {
  27.       handle({
  28.         onResolved: onResolved,
  29.         resolve: resolve,
  30.       });
  31.     });
  32.   };
  34.   fn(resolve);
  35. }
  37. function doSomething() {
  38.   return new Promise(function (resolve) {
  39.     resolve(666);
  40.   });
  41. }
  43. function doSomethingElse(value) {
  44.   return new Promise(function (resolve) {
  45.     resolve("did something else with " + value);
  46.   });
  47. }
  49. var p = doSomething()
  50.   .then()
  51.   .then((data) => {
  52.     console.log("Got a value: " + data);
  54.     return doSomethingElse(data);
  55.   })
  56.   .then((value) => {
  57.     console.log("Got anotherPromise: " + value);
  58.   });

:::info rejected 状态实现 :::

function Promise(fn) {
  var state = "pending";
  var value;

  function resolve(newValue) {
    if (newValue && typeof newValue.then === "function") {
      newValue.then(resolve);
      return;
    }

    value = newValue;
    state = "resolved";
  }

  function reject(reason) {
    value = reason;
    state = "rejected";
  }

  function handle(handler) {
    var handlerCallback;

    if (state === "resolved") {
      handlerCallback = handler.onResolved;
    } else {
      handlerCallback = handler.onRejected;
    }

    if (!handlerCallback) {
      if (state === "resolved") {
        handler.resolve(value);
      } else {
        handler.reject(value);
      }
      return;
    }

    var returnValue = handlerCallback(value);
    handler.resolve(returnValue);
  }

  this.then = function (onResolved, onRejected) {
    return new Promise(function (resolve, reject) {
      handle({
        onResolved: onResolved,
        onRejected: onRejected,
        resolve: resolve,
        reject: reject,
      });
    });
  };

  fn(resolve, reject);
}

function somehowGetThevalue() {
  return Math.random() > 0.5 ? { value: ">0.5" } : { error: "<=0.5" };
}

function doSomething() {
  return new Promise(function (resolve, reject) {
    var result = somehowGetThevalue();

    if (result.error) {
      reject(result.error);
    } else {
      resolve(result.value);
    }
  });
}

var p = doSomething().then(
  (value) => {
    console.log("Success!", value);
  },
  (error) => {
    console.log("Fail!", error);
  }
);

:::info resolve 时捕捉异常也用 reject 处理 :::

function Promise(fn) {
  var state = "pending";
  var value;

  function resolve(newValue) {
    try {
      if (newValue && typeof newValue.then === "function") {
        newValue.then(resolve);
        return;
      }

      value = newValue;
      state = "resolved";
    } catch (e) {
      reject(e);
    }
  }

  function reject(reason) {
    value = reason;
    state = "rejected";
  }

  function handle(handler) {
    var handlerCallback;

    if (state === "resolved") {
      handlerCallback = handler.onResolved;
    } else {
      handlerCallback = handler.onRejected;
    }

    if (!handlerCallback) {
      if (state === "resolved") {
        handler.resolve(value);
      } else {
        handler.reject(value);
      }
      return;
    }

    var returnValue;
    try {
      returnValue = handlerCallback(value);
    } catch (e) {
      handler.reject(e);
      return;
    }
    handler.resolve(returnValue);
  }

  this.then = function (onResolved, onRejected) {
    return new Promise(function (resolve, reject) {
      handle({
        onResolved: onResolved,
        onRejected: onRejected,
        resolve: resolve,
        reject: reject,
      });
    });
  };

  fn(resolve, reject);
}

function somehowGetThevalue() {
  return Math.random() > 0.5 ? { value: ">0.5" } : { error: "<=0.5" };
}

function doSomething() {
  return new Promise(function (resolve, reject) {
    var result = somehowGetThevalue();

    if (result.error) {
      reject(result.error);
    } else {
      resolve(result.value);
    }
  });
}

var p = doSomething().then(
  (value) => {
    console.log("Success!", value);
  },
  (error) => {
    console.log("Fail!", error);
  }
);

:::info 使 promise 的 then 是异步的过程 :::

function Promise(fn) {
  var state = "pending";
  var value;

  function resolve(newValue) {
    try {
      if (newValue && typeof newValue.then === "function") {
        newValue.then(resolve);
        return;
      }

      value = newValue;
      state = "resolved";
    } catch (e) {
      reject(e);
    }
  }

  function reject(reason) {
    value = reason;
    state = "rejected";
  }

  function handle(handler) {
    setTimeout(function () {
      var handlerCallback;

      if (state === "resolved") {
        handlerCallback = handler.onResolved;
      } else {
        handlerCallback = handler.onRejected;
      }

      if (!handlerCallback) {
        if (state === "resolved") {
          handler.resolve(value);
        } else {
          handler.reject(value);
        }
        return;
      }

      var returnValue;
      try {
        returnValue = handlerCallback(value);
      } catch (e) {
        handler.reject(e);
        return;
      }
      handler.resolve(returnValue);
    }, 1);
  }

  this.then = function (onResolved, onRejected) {
    return new Promise(function (resolve, reject) {
      handle({
        onResolved: onResolved,
        onRejected: onRejected,
        resolve: resolve,
        reject: reject,
      });
    });
  };

  fn(resolve, reject);
}

function somehowGetThevalue() {
  return Math.random() > 0.5 ? { value: ">0.5" } : { error: "<=0.5" };
}

function doSomething() {
  return new Promise(function (resolve, reject) {
    var result = somehowGetThevalue();

    if (result.error) {
      reject(result.error);
    } else {
      resolve(result.value);
    }
  });
}

console.log(1);
var p = doSomething().then(
  (value) => {
    console.log("Success!", value);
  },
  (error) => {
    console.log("Fail!", error);
  }
);
console.log(2);