手寫Promise

Promise是JS進行異步操作的重要API，也是開發(fā)基本上繞不開的技術(shù)，所以很有必要對其進行深入的了解。本文我們就一步步手動實現(xiàn)Promise的相關(guān)功能齐疙。

`Promise`屬性和構(gòu)造函數(shù)

原生功能

`Promise`對象的屬性

驗證原生Promise

let p = new Promise((resolve, reject) => {});
console.log(p);

結(jié)果：

[[Prototype]]: Promise
[[PromiseState]]: "pending"
[[PromiseResult]]: undefined

結(jié)論：

原生Promise有兩個屬性，PromiseState 和 PromiseResult

`Promise`構(gòu)造函數(shù)

驗證原生Promise

let p = new Promise((resolve, reject) => {
  resolve("success");
});
console.log(p);

結(jié)果：

[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "success"

結(jié)論

resolve函數(shù)作用： 1) 將Promise的PromiseState 由默認(rèn)的 pending 變成了 fulfilled旭咽， 2) 將Promise的PromiseResult由undefined變成了函數(shù)的傳入?yún)?shù)success贞奋。

(resolve, reject) => { ... } 這函數(shù)在初始化對象的時候是同步執(zhí)行的。

驗證原生Promise

let p = new Promise((resolve, reject) => {
    reject("failed")
});
console.log(p);

結(jié)果：

[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "failed"

結(jié)論

reject函數(shù)作用： 1) 將Promise的PromiseState 由默認(rèn)的 pending 變成了 rejected穷绵， 2) 將Promise的PromiseResult由undefined變成了函數(shù)的傳入?yún)?shù)failed轿塔。

代碼模擬實現(xiàn)

function Promise(executor) {
  // 記錄上下文，否則resolve和reject的this調(diào)用會有問題
  var _this = this;

  // 1. 設(shè)置屬性
  this.PromiseState = "pending";
  this.PromiseResult = undefined;

  // 2. 兩個對外暴露的函數(shù)接收傳入的參數(shù)data，然后可以改變PromiseState和PromiseResult
  function resolve(data) {
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
  }

  function reject(data) {
    _this.PromiseState = "rejected";
    _this.PromiseResult = data;
  }

  // 3. 構(gòu)造函數(shù)execotor會同步執(zhí)行
  executor(resolve, reject);

}

`Promise`構(gòu)造器函數(shù)執(zhí)行拋出異常

驗證原生Promise

let p = new Promise((resolve, reject) => {
  throw "throwed error"
});
console.log(p);

結(jié)果：

[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "throwed error"

結(jié)論

Promise構(gòu)造器函數(shù)執(zhí)行拋出異常則PromiseState變?yōu)?code>rejected, PromiseResult為拋出異常的內(nèi)容勾缭。

代碼模擬實現(xiàn)

function Promise(executor) {
  var _this = this;

  this.PromiseState = "pending";
  this.PromiseResult = undefined;

  function resolve(data) {
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
  }

  function reject(data) {

    _this.PromiseState = "rejected";
    _this.PromiseResult = data;
  }

  // 用try,catch 捕獲異常揍障，有異常調(diào)用reject方法
  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }

}

`Promise`狀態(tài)只能修改一次

原生功能

驗證原生Promise

let p = new Promise((resolve, reject) => {
  resolve("success");
  reject("failed");
});
console.log(p);

結(jié)果：

[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "success"

結(jié)論

Promise狀態(tài)只能修改一次，所以要么是從 "pending" -> "fulfilled", 要么是 "pending" -> "rejected"俩由。之后就能修改了毒嫡。

代碼模擬實現(xiàn)

function Promise(executor) {
  var _this = this;

  this.PromiseState = "pending";
  this.PromiseResult = undefined;

  function resolve(data) {
    // 如果不是'pending'才修改，如果是'pending'說明已經(jīng)修改過了采驻，就忽略
    if (_this.PromiseState != 'pending') return;
    
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
  }

  function reject(data) {
    // 如果不是'pending'才修改，如果是'pending'說明已經(jīng)修改過了匈勋，就忽略
    if (_this.PromiseState != 'pending') return;

    _this.PromiseState = "rejected";
    _this.PromiseResult = data;
  }

  try {
    executor(resolve, reject);
  } catch (error) {
    resolve(error);
  }

}

`Promise`對象的`then`方法可以獲取`Promise`結(jié)果

原生功能

驗證原生Promise

let p = new Promise((resolve, reject) => {
  resolve("success");
});
p.then((data) => {
  console.log("第一個回調(diào)函數(shù)");
  console.log(data);
}, (error) => {
    console.log("第二個回調(diào)函數(shù)");
  console.log(error);
});

結(jié)果：

第一個回調(diào)函數(shù)
success

結(jié)論

如果Promise的PromiseState 是 fulfilled礼旅，則將PromiseResult作為實參調(diào)用then函數(shù)的第一個函數(shù)參數(shù)；

驗證原生Promise

let p = new Promise((resolve, reject) => {
  reject("failed");
});
p.then((data) => {
  console.log("第一個回調(diào)函數(shù)");
  console.log(data);
}, (error) => {
  console.log("第二個回調(diào)函數(shù)");
  console.log(error);
});

結(jié)果：

第二個回調(diào)函數(shù)
failed

結(jié)論

如果Promise的PromiseState 是 rejected洽洁，則將PromiseResult作為實參調(diào)用then函數(shù)的第二個函數(shù)參數(shù)痘系；

代碼模擬實現(xiàn)

Promise.prototype.then = function(onFulfilled, onRejected) {
  var _this = this;

  // 如果Promise的狀態(tài)是'fulfilled'，將結(jié)果通過第一個函數(shù)參數(shù)傳遞出去饿自，
  // 如果Promise的狀態(tài)是'rejected'汰翠，將結(jié)果通過第二個函數(shù)參數(shù)傳遞出去，
  if (_this.PromiseState == 'fulfilled') {
    onFulfilled(_this.PromiseResult);
  } else if (_this.PromiseState == "rejected") {
    onRejected(_this.PromiseResult);
  }
}

`Promise`對象的`then`方法接收異步任務(wù)的結(jié)果

原生功能

驗證原生Promise

let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success");
  }, 2000);
});
p.then((data) => {
  console.log("第一個回調(diào)函數(shù)");
  console.log(data);
}, (error) => {
  console.log("第二個回調(diào)函數(shù)");
  console.log(error);
});

結(jié)果：

<!-- 過了兩秒再打印 -->
第一個回調(diào)函數(shù)
success

結(jié)論

如果Promise執(zhí)行的是異步任務(wù)昭雌，即調(diào)用then方法時PromiseState為pending复唤，PromiseResult為undefined，先不回調(diào)結(jié)果烛卧，等PromiseResult有值以后再回調(diào)結(jié)果佛纫。

代碼模擬實現(xiàn)

實現(xiàn)的邏輯就是如果暫時沒有結(jié)果，就先把回調(diào)函數(shù)保存起來总放，等有結(jié)果的時候再執(zhí)行回調(diào)函數(shù)呈宇。

function Promise(executor) {
  var _this = this;

  this.PromiseState = "pending";
  this.PromiseResult = undefined;
  // 定義一個變量保存回調(diào)函數(shù)
  this.thenCbs = {};

  function resolve(data) {
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
    // 如果有保存狀態(tài)未改變時對應(yīng)的回調(diào)函數(shù)就調(diào)用
    if (_this.thenCbs.onFulfilled !== undefined) {
      _this.thenCbs.onFulfilled(data);
    }
  }

  function reject(data) {
    _this.PromiseState = "rejected";
    _this.PromiseResult = data;
    if (_this.thenCbs.onRejected !== undefined) {
      _this.thenCbs.onRejected(data);
    }
  }

  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }

}

Promise.prototype.then = function(onFulfilled, onRejected) {
  var _this = this;

  if (_this.PromiseState == 'fulfilled') {
    onFulfilled(_this.PromiseResult);
  } else if (_this.PromiseState == "rejected") {
    onRejected(_this.PromiseResult);
  } else if (_this.PromiseState == 'pending') {
    // 如果是異步任務(wù)，此時還沒有結(jié)果局雄，只能先保存回調(diào)函數(shù)甥啄，等有結(jié)果后再進行函數(shù)調(diào)用
    _this.thenCbs = {
      onFulfilled,
      onRejected
    };
  }
}

`Promise`對象的`then`方法可以多次調(diào)用

原生功能

驗證原生Promise

let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success");
  }, 2000);
});

p.then((data) => {
  console.log("第一個回調(diào)函數(shù)");
  console.log(data);
});

p.then(data => {
  console.log("第二個回調(diào)函數(shù)");
  console.log(data);
})

結(jié)果：

<!-- 過了兩秒再打印 -->
第一個回調(diào)函數(shù)
success
第二個回調(diào)函數(shù)
success

結(jié)論

對Promise多次調(diào)用then方法獲取結(jié)果，對應(yīng)的多個回調(diào)函數(shù)都會執(zhí)行炬搭。

代碼模擬實現(xiàn)

同步任務(wù)不會有問題蜈漓，then調(diào)用多次執(zhí)行多次，主要是異步任務(wù)需要修改宫盔。


function Promise(executor) {
  var _this = this;

  this.PromiseState = "pending";
  this.PromiseResult = undefined;
  // 保存回調(diào)函數(shù)的變量變?yōu)閿?shù)組
  this.thenCbs = [];

  function resolve(data) {
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
    // 如果有保存狀態(tài)未改變時對應(yīng)的回調(diào)函數(shù)數(shù)組迎变，就遍歷調(diào)用
    _this.thenCbs.forEach((item) => {
      if (item.onFulfilled !== undefined) {
        item.onFulfilled(data);
      }
    })
  }

  function reject(data) {
    _this.PromiseState = "rejected";
    _this.PromiseResult = data;
    // 如果有保存狀態(tài)未改變時對應(yīng)的回調(diào)函數(shù)數(shù)組，就遍歷調(diào)用
    _this.thenCbs.forEach((item) => {
      if (item.onRejected !== undefined) {
        item.onRejected(data);
      }
    })

  }

  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }

}

Promise.prototype.then = function(onFulfilled, onRejected) {
  var _this = this;

  if (_this.PromiseState == 'fulfilled') {
    onFulfilled(_this.PromiseResult);
  } else if (_this.PromiseState == "rejected") {
    onRejected(_this.PromiseResult);
  } else if (_this.PromiseState == 'pending') {
    // 如果是異步任務(wù)飘言，此時還沒有結(jié)果衣形，只能先保存回調(diào)函數(shù)，等有結(jié)果后再進行函數(shù)調(diào)用
    _this.thenCbs.push({
      onFulfilled,
      onRejected
    });
  }
}

`Promise`對象的`then`方法執(zhí)行后的返回結(jié)果是Promise對象

原生功能

驗證原生Promise

let p1 = new Promise((resolve, reject) => {
  resolve("success");
});

let res1 = p1.then((data) => {
}, (error) => {})
console.log(res1);

let res2 = p1.then((data) => {
  return "normal success again"
})
console.log(res2);

let res3 = p1.then((data) => {
  return new Promise((resolve, reject) => {
    resolve("promise success again");
  });
})
console.log(res3);

let res4 = p1.then((data) => {
  return new Promise((resolve, reject) => {
    reject("promise fail");
  });
})
console.log(res4);

結(jié)果：

<!--res1-->
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined
<!--res2-->
[PromiseState]]: "fulfilled"
[[PromiseResult]]: "normal success again"
<!--res3-->
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "promise success again"
<!--res4-->
[[PromiseState]]: "rejected"
[[PromiseResult]]: "promise fail"

結(jié)論

then方法返回的是一個新的Promise對象，這個Promise對象的PromiseResult由then指定的回調(diào)函數(shù)返回值決定的谆吴；
p.then((data) => {}, (error) => {}) 如果第一個函數(shù)(data) => {}被調(diào)用就是這個函數(shù)的返回值決定了新的Promise對象的PromiseResult和PromiseState倒源，如果第二個函數(shù)(error) => {}被調(diào)用就是這個函數(shù)的返回值決定了新的Promise對象的PromiseResult和PromiseState

如果被調(diào)用的函數(shù)沒有返回值，則新的Promise對象的PromiseResult 為 undefined,PromiseState 為 fulfilled;

如果被調(diào)用的函數(shù)有返回值但不是Promise句狼，則新的Promise對象的PromiseResult 為函數(shù)的返回值, PromiseState 為 fulfilled;

如果被調(diào)用的函數(shù)返回值是Promise笋熬，則新的Promise對象的PromiseResult 為函數(shù)的返回值Promise的PromiseResult , PromiseState 為函數(shù)的返回值Promise的 PromiseState。

代碼模擬實現(xiàn)

Promise.prototype.then = function (onFulfilled, onRejected) {
  var _this = this;

  // 返回一個新的Promise對象,
  return new Promise((resolve, reject) => {
    
    // 定義一個處理then函數(shù)返回值的函數(shù)腻菇，這里就處理 onFulfilled 和 onRejected 兩個函數(shù)
    let handleThenValue = (cb) => {
      try {
        // 得到成功的函數(shù)的返回結(jié)果
        let result = cb(_this.PromiseResult);
        // 如果這個函數(shù)的返回結(jié)果是Promise對象
        if (result instanceof Promise) {
          // 通過then獲取result這個Promise的結(jié)果和狀態(tài), 得到的結(jié)果就是新的Promise對象的結(jié)果和狀態(tài)
          result.then(
            (data) => {
              resolve(data);
            },
            (error) => {
              reject(error);
            }
          );
        } else {
          // 如果不是Promise對象胳螟，直接成功，結(jié)果為函數(shù)的返回值
          resolve(result);
        }
      } catch (error) {
        // 執(zhí)行錯誤就拋出異常
        throw error;
      }
    };

    if (_this.PromiseState == "fulfilled") {
      // 處理 執(zhí)行 onFulfilled 的返回值
      handleThenValue(onFulfilled);
    } else if (_this.PromiseState == "rejected") {
      // 處理 執(zhí)行 onRejected 的返回值
      handleThenValue(onRejected);
    } else if (_this.PromiseState == "pending") {
      _this.thenCbs.push({
        // 需要擴展筹吐，所以需要用另外加一層能函數(shù)對onFulfilled和onRejected進行封裝
        onFulfilled: () => {
          handleThenValue(onFulfilled)
        },
        onRejected: () => {
          handleThenValue(onRejected)
        },
      });
    }
  });
};

`Promise`對象的`then`鏈?zhǔn)秸{(diào)用的異常穿透

原生功能

驗證原生Promise

<!-- 1 -->
let p1 = new Promise((resolve, reject) => {
  reject("error");
});

p1.then((data) => {
  console.log(data);
}).catch((error) => {
  console.log(error);
});

<!-- 2 -->
let p2 = new Promise((resolve, reject) => {
  resolve("success");
})

p2.then((data) => {
  throw "error"
}).then((data) => {
  console.log(data);
}).catch((e) => {
  console.log(e);
})

結(jié)果：

error
error

結(jié)論

中間then的鏈?zhǔn)秸{(diào)用過程中如果處理失敗的Promise結(jié)果糖耸，在鏈?zhǔn)秸{(diào)用的最后調(diào)用catch方法可以得到第一個出現(xiàn)錯誤的Promise的結(jié)果。

代碼模擬實現(xiàn)

Promise.prototype.then = function (onFulfilled, onRejected) {
  var _this = this;

  // 如果沒傳onRejected就創(chuàng)建一個函數(shù)拋出異常丘薛，由于onRejected拋出異常會被捕獲嘉竟，最后會執(zhí)行reject(error);
  if (typeof onRejected !== "function") {
    onRejected = (e) => {
      throw e;
    };
  }

  return new Promise((resolve, reject) => {

    let handleThenValue = (cb) => {
      try {
        let result = cb(_this.PromiseResult);
        if (result instanceof Promise) {
          result.then(
            (data) => {
              resolve(data);
            },
            (error) => {
              reject(error);
            }
          );
        } else {
          resolve(result);
        }
      } catch (error) {
        // 如果拋出異常，或者沒傳onRejected就會走這里
        reject(error);
      }
    };

    if (_this.PromiseState == "fulfilled") {
      handleThenValue(onFulfilled);
    } else if (_this.PromiseState == "rejected") {
      handleThenValue(onRejected);
    } else if (_this.PromiseState == "pending") {
      _this.thenCbs.push({
        onFulfilled: () => {
          handleThenValue(onFulfilled)
        },
        onRejected: () => {
          handleThenValue(onRejected)
        },
      });
    }
  });
};

// 添加Catch的方法
Promise.prototype.catch = function (onRejected) {
  return this.then(undefined, onRejected);
};

`Promise`對象的`then`的值傳遞

原生功能

驗證原生Promise

let p1 = new Promise((resolve, reject) => {
  resolve("success");
});

p1.then()
.then((data) => {
  console.log(data);
});

結(jié)果：

success

結(jié)論

如果Promise的PromiseState是fulfilled, 而then函數(shù)沒有傳成功的函數(shù)洋侨，則then函數(shù)返回的新Promise對象的PromiseState是fulfilled舍扰，新Promise對象的PromiseResult是上個Promise的PromiseResult`。

總結(jié)：p1.then()返回值和 p1 的PromiseResult 和PromiseState 一樣希坚。

代碼模擬實現(xiàn)

Promise.prototype.then = function (onFulfilled, onRejected) {
  
  // 內(nèi)容不變省略

  // 如果沒傳值就造一個默認(rèn)的函數(shù), 把成功的值直接傳遞下去
  if (typeof onFulfilled !== 'function') {
    onFulfilled = value => value;
  }

  return new Promise((resolve, reject) => {
    // 內(nèi)容不變省略
  });
};

`Promise`的`resolve`方法

原生功能

驗證原生Promise


let p1 = Promise.resolve("1");
let p2 = Promise.resolve();
let p3 = Promise.resolve(new Promise((resolve, reject) => {
  reject("fail");
}));

console.log(p1);
console.log(p2);
console.log(p3);

結(jié)果：

[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "1"

[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined

[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "fail"

結(jié)論

Promise.resolve可以用來構(gòu)建一個Promise對象边苹；

如果傳入的參數(shù)不是Promise對象，則創(chuàng)建的Promise對象 PromiseState 為 fulfilled,

PromiseResult 為傳入的參數(shù)裁僧；

如果傳入的參數(shù)是Promise對象勾给，這創(chuàng)建的Promise對象和參數(shù)的屬性一致。

代碼模擬實現(xiàn)

Promise.resolve = function(params) {
  // 返回一個新的Promise對象
  return new Promise((resolve, reject) => {
    // 如果傳入的是Promise對象锅知，則狀態(tài)和結(jié)果和參數(shù)一致
    if (params instanceof Promise) {
      params.then((data) => {
        resolve(data);
      }, (error) => {
        reject(error)
      });
    } else {
      // 如果傳入的不是Promise對象，直接成功售睹，成功的結(jié)果是傳入的參數(shù)
      resolve(params);
    }
  });
}

`Promise`的`reject`方法

原生功能

驗證原生Promise

let p1 = Promise.reject("1");
let p2 = Promise.reject();
let p3 = Promise.reject(new Promise((resolve, reject) => {
  resolve("success");
}));

console.log(p1);
console.log(p2);
console.log(p3);

結(jié)果：

[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "1"

[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: undefined

[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: Promise

結(jié)論

總是返回一個失敗的Promise對象昌妹，PromiseResult為傳入的參數(shù)

代碼模擬實現(xiàn)

Promise.reject = function(params) {
  console.log(params.PromiseState);
  return new Promise((resolve, reject) => {
    reject(params);
  });
}

`Promise`的`all`方法

原生功能

驗證原生Promise

let p1 = Promise.resolve("1");
let p2 = Promise.resolve("2");
let p3 = Promise.resolve(new Promise((resolve, reject) => {
  resolve("success");
}));
let p4 = Promise.reject("fail");

Promise.all([p1, p2, p3]).then((data) => {
  console.log(data);
}, (error) => {
  console.warn(error);
});

Promise.all([p1, p2, p4]).then((data) => {
  console.log(data);
}, (error) => {
  console.warn(error);
});

結(jié)果：

[1,2,"success"]
fail

結(jié)論

Promise.all返回一個新的Promise對象捶枢，Promise數(shù)組參數(shù)如果最后狀態(tài)都變?yōu)?code>fulfilled , 則返回一個數(shù)組，新的Promise對象的PromiseResult為一個數(shù)組烂叔，數(shù)組中的值是Promise的PromiseResult;

Promise.all返回一個新的Promise對象固歪，Promise數(shù)組參數(shù)如果有一個變?yōu)?code>rejected , 則新的Promise對象PromiseState變?yōu)?code>rejected蒜鸡，PromiseResult為失敗的Promise的PromiseResult胯努；

代碼模擬實現(xiàn)

Promise.all = function(arr) {

  return new Promise((resolve, reject) => {
    try {
      let resultArr = [];
      let count = 0;
      // 遍歷Promise對象
      arr.forEach((item, index) => {
        // 取每個Promise的值
        item.then((data) => {
          // 成功就記錄下來
          resultArr[index] = data;
          count ++;
          // 如果都成功了逢防，就該狀態(tài)
          if (count == arr.length) {
            resolve(resultArr);
          }
        }, (error) => {
          // 只要有一個失敗就失敗
          reject(error);
        })
      });

    } catch (error) {
      reject(error);      
    }
  });
}

`Promise`的`race`方法

race 傳入一個Promsie數(shù)組忘朝，返回一個新的Promsie對象。新的Promsie對象的PromiseState和PromiseResult 由最先完成的那個Promise決定溉箕。

代碼模擬實現(xiàn)

Promise.race = function(arr) {
  return new Promise((resolve, reject) =>{
    try {
      // 誰先改變狀態(tài)誰來決定返回的結(jié)果
      arr.forEach((item) => {
        item.then((data) => {
          resolve(data);
        }, (error) =>{
          reject(error);
        })
      })
    } catch (error) {
      reject(error);
    }
  });
}

`Promise`對象的`finally`方法

原生功能

驗證原生Promise

let p1 = new Promise((resolve, reject) => {
  resolve("success");
});

p1.then((data) => {
  console.log("success called：", data);
}, (e) => {
  console.log(e);
})
.finally((a) => {
  console.log("finally called");
})

let p2 = new Promise((resolve, reject) => {
  reject("failed");
})

p2.then((data) => {
  console.log(data);
}, (e) => {
  console.log("error called：", e);
})
.finally((a) => {
  console.log("finally called");
})

結(jié)果：

success called： success
finally called

error called： failed
finally called

結(jié)論

Promise無論是成功還是失敗悦昵，在PromiseState變化后都會調(diào)用finally方法旱捧。
finally方法的返回值也是值傳遞踩麦。即p.finally()返回值和 p 的PromiseResult 和PromiseState 一樣。

代碼模擬實現(xiàn)

Promise.prototype.finally = function(onFinally) {
  // 構(gòu)造兩個回調(diào)函數(shù)贫橙，
  return this.then(
    function(data) {
      // 這里先執(zhí)行onFinally函數(shù)卢肃，然后返回原來的值
      return Promise.resolve(onFinally()).then((data) => data);
    },
    function(error) {
      // 這里先執(zhí)行onFinally函數(shù)才顿，然后拋出錯誤
      return Promise.resolve(onFinally()).then(() => {throw error});
    }
  )
}

完成

function Promise(executor) {
  var _this = this;

  this.PromiseState = "pending";
  this.PromiseResult = undefined;
  this.thenCbs = [];

  function resolve(data) {
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
    _this.thenCbs.forEach((item) => {
      if (item.onFulfilled !== undefined) {
        item.onFulfilled(data);
      }
    });
  }

  function reject(data) {
    _this.PromiseState = "rejected";
    _this.PromiseResult = data;
    _this.thenCbs.forEach((item) => {
      if (item.onRejected !== undefined) {
        item.onRejected(data);
      }
    });
  }

  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }
}

Promise.prototype.then = function (onFulfilled, onRejected) {
  var _this = this;

  if (typeof onRejected !== "function") {
    onRejected = (e) => {
      throw e;
    };
  }

  if (typeof onFulfilled !== 'function') {
    onFulfilled = value => value;
  }

  return new Promise((resolve, reject) => {

    let handleThenValue = (cb) => {
      try {
        let result = cb(_this.PromiseResult);
        if (result instanceof Promise) {
          result.then(
            (data) => {
              resolve(data);
            },
            (error) => {
              reject(error);
            }
          );
        } else {
          resolve(result);
        }
      } catch (error) {
        reject(error);
      }
    };

    if (_this.PromiseState == "fulfilled") {
      handleThenValue(onFulfilled);
    } else if (_this.PromiseState == "rejected") {
      handleThenValue(onRejected);
    } else if (_this.PromiseState == "pending") {
      _this.thenCbs.push({
        onFulfilled: () => {
          handleThenValue(onFulfilled)
        },
        onRejected: () => {
          handleThenValue(onRejected)
        },
      });
    }
  });
};

Promise.prototype.catch = function (onRejected) {
  return this.then(undefined, onRejected);
};

Promise.prototype.finally = function(onFinally) {
  return this.then(
    function(data) {
      return Promise.resolve(onFinally()).then((data) => data);
    },
    function(error) {
      return Promise.resolve(onFinally()).then(() => {throw error});
    }
  )
}

Promise.resolve = function(params) {
  return new Promise((resolve, reject) => {
    if (params instanceof Promise) {
      params.then((data) => {
        resolve(data);
      }, (error) => {
        reject(error)
      });
    } else {
      resolve(params);
    }
  });
}

Promise.reject = function(params) {
  return new Promise((resolve, reject) => {
    reject(params);
  });
}

Promise.all = function(arr) {

  return new Promise((resolve, reject) => {
    try {
      let resultArr = [];
      let count = 0;
      arr.forEach((item, index) => {
        item.then((data) => {
          resultArr[index] = data;
          count ++;
          if (count == arr.length) {
            resolve(resultArr);
          }
        }, (error) => {
          reject(error);
        })
      });

    } catch (error) {
      reject(error);      
    }
  });
}

最后編輯于：2022.01.22 20:29:31

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市尾组，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌呵萨，老刑警劉巖跨跨，帶你破解...
沈念sama閱讀 222,378評論 6贊 516
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異跑杭，居然都是意外死亡，警方通過查閱死者的電腦和手機爹橱，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,970評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門愧驱，熙熙樓的掌柜王于貴愁眉苦臉地迎上來椭盏，“玉大人，你說我怎么就攤上這事糟红∨璩ィ” “怎么了准浴？”我有些...
開封第一講書人閱讀 168,983評論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵乐横，是天一觀的道長。經(jīng)常有香客問我罐农，道長催什，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 59,938評論 1贊 299
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮豹爹，結(jié)果婚禮上臂聋，老公的妹妹穿的比我還像新娘或南。我一直安慰自己艾君，他們只是感情好冰垄，可當(dāng)我...
茶點故事閱讀 68,955評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著逝薪，像睡著了一般董济。火紅的嫁衣襯著肌膚如雪要门。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 52,549評論 1贊 312
城市分裂傳說
那天封豪，我揣著相機與錄音撑毛，去河邊找鬼唧领。笑死雌续，一個胖子當(dāng)著我的面吹牛驯杜，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播滚局，決...
沈念sama閱讀 41,063評論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼藤肢，長吁一口氣：“原來是場噩夢啊……” “哼糯景！你這毒婦竟也來了省骂？” 一聲冷哼從身側(cè)響起钞澳，我...
開封第一講書人閱讀 39,991評論 0贊 277
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤涨缚，失蹤者是張志新（化名）和其女友劉穎脓魏，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體揽祥，經(jīng)...
沈念sama閱讀 46,522評論 1贊 319
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡拄丰，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,604評論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年俐末，在試婚紗的時候發(fā)現(xiàn)自己被綠了卓箫。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,742評論 1贊 353
活死人
序言：一個原本活蹦亂跳的男人離奇死亡闷盔，死狀恐怖逢勾，靈堂內(nèi)的尸體忽然破棺而出藐吮，到底是詐尸還是另有隱情，我是刑警寧澤迫摔，帶...
沈念sama閱讀 36,413評論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布句占，位于F島的核電站歉闰，受9級特大地震影響卓起，放射性物質(zhì)發(fā)生泄漏戏阅。R本人自食惡果不足惜啤它，卻給世界環(huán)境...
茶點故事閱讀 42,094評論 3贊 335
男人毒藥：我在死后第九天來索命
文/蒙蒙一变骡、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧渊胸，春花似錦台妆、人聲如沸接剩。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,572評論 0贊 25
一樁弒父案疫稿，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽鹃两。三九已至怔毛，卻和暖如春腾降，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背抗果。一陣腳步聲響...
開封第一講書人閱讀 33,671評論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工冤馏，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留寄啼，地道東北人代箭。一個月前我還...
沈念sama閱讀 49,159評論 3贊 378
代替公主和親
正文我出身青樓嗡综，卻偏偏與公主長得像极景，于是被迫代替她去往敵國和親驾茴。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,747評論 2贊 361

手寫Promise

Promise屬性和構(gòu)造函數(shù)

原生功能

Promise對象的屬性

Promise構(gòu)造函數(shù)

代碼模擬實現(xiàn)

Promise構(gòu)造器函數(shù)執(zhí)行拋出異常

代碼模擬實現(xiàn)

Promise狀態(tài)只能修改一次

原生功能

代碼模擬實現(xiàn)

Promise對象的then方法可以獲取Promise結(jié)果

原生功能

代碼模擬實現(xiàn)

Promise對象的then方法接收異步任務(wù)的結(jié)果

原生功能

代碼模擬實現(xiàn)

Promise對象的then方法可以多次調(diào)用

原生功能

代碼模擬實現(xiàn)

Promise對象的then方法執(zhí)行后的返回結(jié)果是Promise對象

原生功能

代碼模擬實現(xiàn)

Promise對象的then鏈?zhǔn)秸{(diào)用的異常穿透

原生功能

代碼模擬實現(xiàn)

Promise對象的then的值傳遞

原生功能

代碼模擬實現(xiàn)

Promise的resolve方法

原生功能

代碼模擬實現(xiàn)

Promise的reject方法

原生功能

代碼模擬實現(xiàn)

Promise的all方法

原生功能

代碼模擬實現(xiàn)

Promise的race方法

代碼模擬實現(xiàn)

Promise對象的finally方法

原生功能

代碼模擬實現(xiàn)

完成

推薦閱讀更多精彩內(nèi)容

`Promise`屬性和構(gòu)造函數(shù)

`Promise`對象的屬性

`Promise`構(gòu)造函數(shù)

`Promise`構(gòu)造器函數(shù)執(zhí)行拋出異常

`Promise`狀態(tài)只能修改一次

`Promise`對象的`then`方法可以獲取`Promise`結(jié)果

`Promise`對象的`then`方法接收異步任務(wù)的結(jié)果

`Promise`對象的`then`方法可以多次調(diào)用

`Promise`對象的`then`方法執(zhí)行后的返回結(jié)果是Promise對象

`Promise`對象的`then`鏈?zhǔn)秸{(diào)用的異常穿透

`Promise`對象的`then`的值傳遞

`Promise`的`resolve`方法

`Promise`的`reject`方法

`Promise`的`all`方法

`Promise`的`race`方法

`Promise`對象的`finally`方法