Promise

v1：基本实现

  1. // 最基础的Promise
  3. var pending = 0;
  4. var fulfilled = 1;
  5. var rejected = 2;
  7. function Promisee(fn) {
  8.   var state = pending;
  9.   var value = null;
  10.   function fulfill(result) {
  11.     state = fulfilled;
  12.     value = result;
  13.   }
  15.   function reject(err) {
  16.     state = reject;
  17.     value = err;
  18.   }
  20.   fn(fulfill, reject);
  22.   this.then = function (onFulfilled, onRejected) {
  23.     if (state === fulfilled) {
  24.       onFulfilled(value);
  25.     }
  26.     if (state === rejected) {
  27.       onRejected(value);
  28.     }
  29.   };
  30. }
  31. var p = new Promisee((resove, reject) => {
  32.   resove('hello world');
  33. }).then((res) => {
  34.   console.log(res);
  35. });

v2：加上异步机制

  1. // 使 promse 具有异步功能
  2. var pending = 0;
  3. var fulfilled = 1;
  4. var rejected = 2;
  6. function Promisee(fn) {
  7.   var state = pending;
  8.   var value = null;
  9.   var handler = [];
  10.   function fulfill(result) {
  11.     state = fulfilled;
  12.     value = result;
  13.     handler.forEach((handle) => handle.onFulfilled(result));
  14.   }
  16.   function reject(err) {
  17.     state = reject;
  18.     value = err;
  19.     handler.forEach((handle) => handle.onRejected(err));
  20.   }
  22.   fn(fulfill, reject);
  24.   this.then = function (onFulfilled, onRejected) {
  25.     if (state === pending) {
  26.       handler.push({ onFulfilled, onRejected });
  27.     }
  29.     if (state === fulfilled) {
  30.       onFulfilled(value);
  31.     }
  32.     if (state === rejected) {
  33.       onRejected(value);
  34.     }
  35.   };
  36. }
  37. var p = new Promisee((resove, reject) => {
  38.   setTimeout(() => {
  39.     resove('hello world promise');
  40.   }, 200);
  41. }).then((res) => {
  42.   console.log(res);
  43. });

v3 ：链式调用

  1. // 使 promise 链式调用
  3. function Promisee(fn) {
  4.   var pending = 0;
  5.   var fulfilled = 1;
  6.   var rejected = 2;
  7.   var handler = [];
  8.   var state = pending;
  9.   var value = null;
  10.   function fulfill(result) {
  11.     state = fulfilled;
  12.     value = result;
  13.     console.log(handler);
  14.     handler.forEach((handle) => handle.onFulfilled(result));
  15.   }
  17.   function reject(err) {
  18.     state = reject;
  19.     value = err;
  20.     handler.forEach((handle) => handle.onRejected(err));
  21.   }
  23.   fn(fulfill, reject);
  25.   this.then = function (onFulfilled, onRejected) {
  26.     return new Promisee((resolve, reject) => {
  27.       const fulfillFn = (value) => resolve(onFulfilled(value));
  28.       const rejectFn = (err) => reject(onRejected(err));
  29.       if (state === pending) {
  30.         handler.push({ onFulfilled: fulfillFn, onRejected: rejectFn });
  31.       }
  32.       if (state === fulfilled) {
  33.         resolve(fulfillFn);
  34.       }
  35.       if (state === rejected) {
  36.         reject(rejectFn);
  37.       }
  38.     });
  39.   };
  40. }
  41. var p = new Promisee((resove, reject) => {
  42.   setTimeout(() => {
  43.     resove('hello world promise');
  44.   }, 200);
  45. })
  46.   .then((res) => {
  47.     console.log(res + 'abc');
  48.     return res + 12345;
  49.   })
  50.   .then((res2) => {
  51.     return res2 + 67890;
  52.   })
  53.   .then((res3) => {
  54.     console.log(res3);
  55.   });

v4 :支持中途 promise 返回

  1. // return 支持 promise 返回值
  3. class Promisee {
  4.   constructor(fn) {
  5.     this.pending = 0;
  6.     this.fulfilled = 1;
  7.     this.rejected = 2;
  8.     this.handler = [];
  9.     this.state = this.pending;
  10.     this.value = null;
  12.     const fulfill = (result) => {
  13.       this.state = this.fulfilled;
  14.       this.value = result;
  15.       this.handler.forEach((handle) => handle.onFulfilled(result));
  16.     };
  18.     const reject = (err) => {
  19.       this.state = reject;
  20.       this.value = err;
  21.       this.handler.forEach((handle) => handle.onRejected(err));
  22.     };
  24.     const getThen = (value) => {
  25.       const t = typeof value;
  26.       if (t === 'object' || t === 'function') {
  27.         var then = value.then;
  28.         if (typeof then === 'function') {
  29.           return then;
  30.         }
  31.       } else {
  32.         return null;
  33.       }
  34.     };
  36.     const resolve = (result) => {
  37.       const then = getThen(result);
  38.       if (then) {
  39.         then.call(result, resolve, reject);
  40.         return;
  41.       }
  42.       fulfill(result);
  43.     };
  44.     fn(resolve, reject);
  45.   }
  47.   then(onFulfilled, onRejected) {
  48.     return new Promisee((resolve, reject) => {
  49.       const fulfillFn = (value) => resolve(onFulfilled(value));
  50.       const rejectFn = (err) => reject(onRejected(err));
  51.       if (this.state === this.pending) {
  52.         this.handler.push({ onFulfilled: fulfillFn, onRejected: rejectFn });
  53.       }
  54.       if (this.state === this.fulfilled) {
  55.         fulfillFn(this.value);
  56.       }
  57.       if (this.state === this.rejected) {
  58.         rejectFn(this.value);
  59.       }
  60.     });
  61.   }
  62.   static resolve = function (value) {
  63.     return new Promisee(function (resolve) {
  64.       resolve(value);
  65.     });
  66.   };
  67. }
  68. console.log('a');
  69. var p = new Promisee((resove, reject) => {
  70.   // setTimeout(() => {
  71.   resove('hello world promise');
  72.   // }, 200);
  73. })
  74.   .then((res) => {
  75.     console.log('b');
  76.     return res + 12345;
  77.   })
  78.   .then((res2) => {
  79.     return Promisee.resolve(res2);
  80.   })
  81.   .then((res3) => {
  82.     console.log(res3, 'xxx');
  83.   });
  84. console.log('c');

v5: 支持微任务机制

  1. // return 添加微任务机制
  3. class Promisee {
  4.   constructor(fn) {
  5.     this.pending = 0;
  6.     this.fulfilled = 1;
  7.     this.rejected = 2;
  8.     this.handler = [];
  9.     this.state = this.pending;
  10.     this.value = null;
  12.     const fulfill = (result) => {
  13.       this.state = this.fulfilled;
  14.       this.value = result;
  15.       this.handler.forEach((handle) => handle.onFulfilled(result));
  16.     };
  18.     const reject = (err) => {
  19.       this.state = this.rejected;
  20.       this.value = err;
  21.       this.handler.forEach((handle) => handle.onRejected(err));
  22.     };
  24.     const getThen = (value) => {
  25.       const t = typeof value;
  26.       if (t === 'object' || t === 'function') {
  27.         var then = value.then;
  28.         if (typeof then === 'function') {
  29.           return then;
  30.         }
  31.       } else {
  32.         return null;
  33.       }
  34.     };
  36.     const resolve = (result) => {
  37.       try {
  38.         const then = getThen(result);
  39.         if (then) {
  40.           then.call(result, resolve, reject);
  41.           return;
  42.         }
  43.         fulfill(result);
  44.       } catch (err) {
  45.         reject(err);
  46.       }
  47.     };
  48.     fn(resolve, reject);
  49.   }
  51.   done(fulfillFn, rejectFn) {
  52.     queueMicrotask(() => {
  53.       if (this.state === this.pending) {
  54.         this.handler.push({ onFulfilled: fulfillFn, onRejected: rejectFn });
  55.       }
  56.       if (this.state === this.fulfilled) {
  57.         fulfillFn(this.value);
  58.       }
  59.       if (this.state === this.rejected) {
  60.         rejectFn(this.value);
  61.       }
  62.     });
  63.   }
  65.   then(onFulfilled, onRejected) {
  66.     return new Promisee((resolve, reject) => {
  67.       let fulfillFn, rejectFn;
  68.       if (typeof onFulfilled === 'function') {
  69.         fulfillFn = (value) => resolve(onFulfilled(value));
  70.       } else {
  71.         fulfillFn = (value) => resove(value);
  72.       }
  73.       if (typeof onRejected === 'function') {
  74.         rejectFn = (err) => reject(onRejected(err));
  75.       } else {
  76.         rejectFn = (value) => reject(value);
  77.       }
  78.       this.done(fulfillFn, rejectFn);
  79.     });
  80.   }
  81.   catch(onRejected) {
  82.     return this.then(null, onRejected);
  83.   }
  84.   static resolve = function (value) {
  85.     return new Promisee(function (resolve) {
  86.       resolve(value);
  87.     });
  88.   };
  89. }
  90. console.log('a');
  91. var p = new Promisee((resove, reject) => {
  92.   setTimeout(() => {
  93.     resove('hello world promise');
  94.   }, 200);
  95. })
  96.   .then((res) => {
  97.     throw new Error('this is error');
  98.   })
  99.   .then((res2) => {
  100.     return Promisee.resolve(res2);
  101.   })
  102.   .catch((err) => {
  103.     console.log(err);
  104.   });
  105. console.log('c');