手寫Promise

PromiseJS進行異步操作的重要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有兩個屬性,PromiseStatePromiseResult

Promise構(gòu)造函數(shù)
  • 驗證原生Promise
let p = new Promise((resolve, reject) => {
  resolve("success");
});
console.log(p);
  • 結(jié)果:
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "success"
  • 結(jié)論
  1. resolve函數(shù)作用: 1) 將PromisePromiseState 由 默認(rèn)的 pending 變成了 fulfilled旭咽, 2) 將PromisePromiseResultundefined變成了函數(shù)的傳入?yún)?shù)success贞奋。
  2. (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) 將PromisePromiseState 由 默認(rèn)的 pending 變成了 rejected穷绵, 2) 將PromisePromiseResultundefined變成了函數(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é)論

如果PromisePromiseStatefulfilled礼旅,則將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é)論

如果PromisePromiseStaterejected洽洁,則將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方法時PromiseStatepending复唤,PromiseResultundefined,先不回調(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é)論
  1. then方法返回的是一個新的Promise對象,這個Promise對象的PromiseResultthen指定的回調(diào)函數(shù)返回值決定的谆吴;
    p.then((data) => {}, (error) => {}) 如果第一個函數(shù)(data) => {}被調(diào)用就是這個函數(shù)的返回值決定了新的Promise對象的PromiseResultPromiseState倒源,如果第二個函數(shù)(error) => {}被調(diào)用就是這個函數(shù)的返回值決定了新的Promise對象的PromiseResultPromiseState
  2. 如果被調(diào)用的函數(shù)沒有返回值,則新的Promise對象的PromiseResultundefined,PromiseStatefulfilled;
  3. 如果被調(diào)用的函數(shù)有返回值但不是Promise句狼,則新的Promise對象的PromiseResult 為 函數(shù)的返回值, PromiseStatefulfilled;
  4. 如果被調(diào)用的函數(shù)返回值是Promise笋熬,則新的Promise對象的PromiseResult 為 函數(shù)的返回值PromisePromiseResult , PromiseState 為 函數(shù)的返回值PromisePromiseState

代碼模擬實現(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é)論

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

總結(jié):p1.then()返回值 和 p1 的PromiseResultPromiseState 一樣希坚。

代碼模擬實現(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)容不變省略
  });
};

Promiseresolve方法

原生功能

  • 驗證原生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é)論
  1. Promise.resolve可以用來構(gòu)建一個Promise對象边苹;
  2. 如果傳入的參數(shù)不是Promise對象,則創(chuàng)建的Promise對象 PromiseStatefulfilled,

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

  1. 如果傳入的參數(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);
    }
  });
}

Promisereject方法

原生功能

  • 驗證原生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);
  });
}

Promiseall方法

原生功能

  • 驗證原生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é)論
  1. Promise.all返回一個新的Promise對象捶枢,Promise數(shù)組參數(shù)如果最后狀態(tài)都變?yōu)?code>fulfilled , 則返回一個數(shù)組,新的Promise對象的PromiseResult為一個數(shù)組烂叔,數(shù)組中的值是PromisePromiseResult;
  2. Promise.all返回一個新的Promise對象固歪,Promise數(shù)組參數(shù)如果有一個變?yōu)?code>rejected , 則新的Promise對象PromiseState變?yōu)?code>rejected蒜鸡,PromiseResult為失敗的PromisePromiseResult胯努;

代碼模擬實現(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);      
    }
  });
}

Promiserace方法

race 傳入一個Promsie數(shù)組忘朝,返回一個新的Promsie對象。新的Promsie對象的PromiseStatePromiseResult 由最先完成的那個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()返回值 和 pPromiseResultPromiseState 一樣。

代碼模擬實現(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);      
    }
  });
}
最后編輯于
?著作權(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
  • 文/蒼蘭香墨 我猛地睜開眼藤肢,長吁一口氣:“原來是場噩夢啊……” “哼糯景!你這毒婦竟也來了省骂?” 一聲冷哼從身側(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
  • 正文 年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

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