手写Promise

Promise是JS进行异步操作的重要API，也是开发基本上绕不开的技术，所以很有必要对其进行深入的了解。本文我们就 一步步手动实现Promise的相关功能。

Promise属性和构造函数

原生功能

Promise对象的属性
  • 验证原生Promise 
let p = new Promise((resolve, reject) => {});
console.log(p);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "pending"
[[PromiseResult]]: undefined
  • 结论：

原生Promise有两个属性，PromiseState 和 PromiseResult

Promise构造函数
  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  resolve("success");
});
console.log(p);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "success"
  • 结论
  1. resolve函数作用： 1) 将Promise的PromiseState 由 默认的 pending 变成了 fulfilled， 2) 将Promise的PromiseResult由undefined变成了函数的传入参数success。
  2. (resolve, reject) => { ... } 这函数在初始化对象的时候是同步执行的。
  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
    reject("failed")
});
console.log(p);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "failed"
  • 结论

reject函数作用： 1) 将Promise的PromiseState 由 默认的 pending 变成了 rejected， 2) 将Promise的PromiseResult由undefined变成了函数的传入参数failed。

代码模拟实现

function Promise(executor) {
  // 记录上下文，否则resolve和reject的this调用会有问题
  var _this = this;

  // 1. 设置属性
  this.PromiseState = "pending";
  this.PromiseResult = undefined;

  // 2. 两个对外暴露的函数接收传入的参数data，然后可以改变PromiseState和PromiseResult
  function resolve(data) {
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
  }

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

  // 3. 构造函数execotor会同步执行
  executor(resolve, reject);

}

Promise构造器函数执行抛出异常

  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  throw "throwed error"
});
console.log(p);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "throwed error"
  • 结论

Promise构造器函数执行抛出异常则PromiseState变为rejected, PromiseResult为抛出异常的内容。

代码模拟实现

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 捕获异常，有异常调用reject方法
  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }

}

Promise状态只能修改一次

原生功能

  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  resolve("success");
  reject("failed");
});
console.log(p);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "success"
  • 结论

Promise状态只能修改一次，所以要么是从 "pending" -> "fulfilled", 要么是 "pending" -> "rejected"。之后就能修改了。

代码模拟实现

function Promise(executor) {
  var _this = this;

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

  function resolve(data) {
    // 如果不是'pending'才修改，如果是'pending'说明已经修改过了，就忽略
    if (_this.PromiseState != 'pending') return;
    
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
  }

  function reject(data) {
    // 如果不是'pending'才修改，如果是'pending'说明已经修改过了，就忽略
    if (_this.PromiseState != 'pending') return;

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

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

}

Promise对象的then方法可以获取Promise结果

原生功能

  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  resolve("success");
});
p.then((data) => {
  console.log("第一个回调函数");
  console.log(data);
}, (error) => {
    console.log("第二个回调函数");
  console.log(error);
});
  • 结果：
第一个回调函数
success
  • 结论

如果Promise的PromiseState 是 fulfilled，则将PromiseResult作为实参调用then函数的第一个函数参数；

  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  reject("failed");
});
p.then((data) => {
  console.log("第一个回调函数");
  console.log(data);
}, (error) => {
  console.log("第二个回调函数");
  console.log(error);
});
  • 结果：
第二个回调函数
failed
  • 结论

如果Promise的PromiseState 是 rejected，则将PromiseResult作为实参调用then函数的第二个函数参数；

代码模拟实现

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

  // 如果Promise的状态是'fulfilled'，将结果通过第一个函数参数传递出去，
  // 如果Promise的状态是'rejected'，将结果通过第二个函数参数传递出去，
  if (_this.PromiseState == 'fulfilled') {
    onFulfilled(_this.PromiseResult);
  } else if (_this.PromiseState == "rejected") {
    onRejected(_this.PromiseResult);
  }
}

Promise对象的then方法接收异步任务的结果

原生功能

  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success");
  }, 2000);
});
p.then((data) => {
  console.log("第一个回调函数");
  console.log(data);
}, (error) => {
  console.log("第二个回调函数");
  console.log(error);
});
  • 结果：
<!-- 过了两秒再打印 -->
第一个回调函数
success
  • 结论

如果Promise执行的是异步任务，即调用then方法时PromiseState为pending，PromiseResult为undefined，先不回调结果，等PromiseResult有值以后再回调结果。

代码模拟实现

实现的逻辑就是如果暂时没有结果，就先把回调函数保存起来，等有结果的时候再执行回调函数。

function Promise(executor) {
  var _this = this;

  this.PromiseState = "pending";
  this.PromiseResult = undefined;
  // 定义一个变量保存回调函数
  this.thenCbs = {};

  function resolve(data) {
    _this.PromiseState = "fulfilled";
    _this.PromiseResult = data;
    // 如果有保存状态未改变时对应的回调函数就调用
    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') {
    // 如果是异步任务，此时还没有结果，只能先保存回调函数，等有结果后再进行函数调用
    _this.thenCbs = {
      onFulfilled,
      onRejected
    };
  }
}

Promise对象的then方法可以多次调用

原生功能

  • 验证原生Promise 
let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success");
  }, 2000);
});

p.then((data) => {
  console.log("第一个回调函数");
  console.log(data);
});

p.then(data => {
  console.log("第二个回调函数");
  console.log(data);
})
  • 结果：
<!-- 过了两秒再打印 -->
第一个回调函数
success
第二个回调函数
success
  • 结论

对Promise多次调用then方法获取结果，对应的多个回调函数都会执行。

代码模拟实现

同步任务不会有问题，then调用多次执行多次，主要是异步任务需要修改。


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 (_this.PromiseState == 'fulfilled') {
    onFulfilled(_this.PromiseResult);
  } else if (_this.PromiseState == "rejected") {
    onRejected(_this.PromiseResult);
  } else if (_this.PromiseState == 'pending') {
    // 如果是异步任务，此时还没有结果，只能先保存回调函数，等有结果后再进行函数调用
    _this.thenCbs.push({
      onFulfilled,
      onRejected
    });
  }
}

Promise对象的then方法执行后的返回结果是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);
  • 结果：
<!--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"
  • 结论
  1. then方法返回的是一个新的Promise对象，这个Promise对象的PromiseResult由then指定的回调函数返回值决定的；
    p.then((data) => {}, (error) => {}) 如果第一个函数(data) => {}被调用就是这个函数的返回值决定了新的Promise对象的PromiseResult和PromiseState，如果第二个函数(error) => {}被调用就是这个函数的返回值决定了新的Promise对象的PromiseResult和PromiseState
  2. 如果被调用的函数没有返回值，则新的Promise对象的PromiseResult 为 undefined,PromiseState 为 fulfilled;
  3. 如果被调用的函数有返回值但不是Promise，则新的Promise对象的PromiseResult 为 函数的返回值, PromiseState 为 fulfilled;
  4. 如果被调用的函数返回值是Promise，则新的Promise对象的PromiseResult 为 函数的返回值Promise的PromiseResult , PromiseState 为 函数的返回值Promise的 PromiseState。

代码模拟实现

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

  // 返回一个新的Promise对象,
  return new Promise((resolve, reject) => {
    
    // 定义一个处理then函数返回值的函数，这里就处理 onFulfilled 和 onRejected 两个函数
    let handleThenValue = (cb) => {
      try {
        // 得到成功的函数的返回结果
        let result = cb(_this.PromiseResult);
        // 如果这个函数的返回结果是Promise对象
        if (result instanceof Promise) {
          // 通过then获取result这个Promise的结果和状态, 得到的结果就是新的Promise对象的结果和状态
          result.then(
            (data) => {
              resolve(data);
            },
            (error) => {
              reject(error);
            }
          );
        } else {
          // 如果不是Promise对象，直接成功，结果为函数的返回值
          resolve(result);
        }
      } catch (error) {
        // 执行错误就抛出异常
        throw error;
      }
    };

    if (_this.PromiseState == "fulfilled") {
      // 处理 执行 onFulfilled 的返回值
      handleThenValue(onFulfilled);
    } else if (_this.PromiseState == "rejected") {
      // 处理 执行 onRejected 的返回值
      handleThenValue(onRejected);
    } else if (_this.PromiseState == "pending") {
      _this.thenCbs.push({
        // 需要扩展，所以需要用另外加一层能函数对onFulfilled和onRejected进行封装
        onFulfilled: () => {
          handleThenValue(onFulfilled)
        },
        onRejected: () => {
          handleThenValue(onRejected)
        },
      });
    }
  });
};

Promise对象的then链式调用的异常穿透

原生功能

  • 验证原生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);
})
  • 结果：
error
error
  • 结论

中间then的链式调用过程中如果处理失败的Promise结果，在链式调用的最后调用catch方法可以得到第一个出现错误的Promise的结果。

代码模拟实现

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

  // 如果没传onRejected就创建一个函数抛出异常，由于onRejected抛出异常会被捕获，最后会执行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);
});
  • 结果：
success
  • 结论

如果Promise的PromiseState是fulfilled, 而then函数没有传成功的函数，则then函数返回的新Promise对象的PromiseState是fulfilled，新Promise对象的PromiseResult是上个Promise的PromiseResult`。

总结：p1.then()返回值 和 p1 的PromiseResult 和PromiseState 一样。

代码模拟实现

Promise.prototype.then = function (onFulfilled, onRejected) {
  
  // 内容不变省略

  // 如果没传值就造一个默认的函数, 把成功的值直接传递下去
  if (typeof onFulfilled !== 'function') {
    onFulfilled = value => value;
  }

  return new Promise((resolve, reject) => {
    // 内容不变省略
  });
};

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);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "1"

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

[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "fail"
  • 结论
  1. Promise.resolve可以用来构建一个Promise对象；
  2. 如果传入的参数不是Promise对象，则创建的Promise对象 PromiseState 为 fulfilled,

PromiseResult 为传入的参数；

  1. 如果传入的参数是Promise对象，这创建的Promise对象和参数的属性一致。

代码模拟实现

Promise.resolve = function(params) {
  // 返回一个新的Promise对象
  return new Promise((resolve, reject) => {
    // 如果传入的是Promise对象，则状态和结果和参数一致
    if (params instanceof Promise) {
      params.then((data) => {
        resolve(data);
      }, (error) => {
        reject(error)
      });
    } else {
      // 如果传入的不是Promise对象，直接成功，成功的结果是传入的参数
      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);
  • 结果：
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "1"

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

[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: Promise
  • 结论

总是返回一个失败的Promise对象，PromiseResult为传入的参数

代码模拟实现

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);
});
  • 结果：
[1,2,"success"]
fail
  • 结论
  1. Promise.all返回一个新的Promise对象，Promise数组参数如果最后状态都变为fulfilled , 则返回一个数组，新的Promise对象的PromiseResult为一个数组，数组中的值是Promise的PromiseResult;
  2. Promise.all返回一个新的Promise对象，Promise数组参数如果有一个变为rejected , 则新的Promise对象PromiseState变为rejected，PromiseResult为失败的Promise的PromiseResult；

代码模拟实现

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 ++;
          // 如果都成功了，就该状态
          if (count == arr.length) {
            resolve(resultArr);
          }
        }, (error) => {
          // 只要有一个失败就失败
          reject(error);
        })
      });

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

Promise的race方法

race 传入一个Promsie数组，返回一个新的Promsie对象。新的Promsie对象的PromiseState和PromiseResult 由最先完成的那个Promise决定。

代码模拟实现

Promise.race = function(arr) {
  return new Promise((resolve, reject) =>{
    try {
      // 谁先改变状态谁来决定返回的结果
      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");
})
  • 结果：
success called： success
finally called

error called： failed
finally called
  • 结论

Promise无论是成功还是失败，在PromiseState变化后都会调用finally方法。
finally方法的返回值也是值传递。即p.finally()返回值 和 p 的PromiseResult 和PromiseState 一样。

代码模拟实现

Promise.prototype.finally = function(onFinally) {
  // 构造两个回调函数，
  return this.then(
    function(data) {
      // 这里先执行onFinally函数，然后返回原来的值
      return Promise.resolve(onFinally()).then((data) => data);
    },
    function(error) {
      // 这里先执行onFinally函数，然后抛出错误
      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);      
    }
  });
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容