作用: Promise 对象,可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。

基本结构

Promise对象内部存在三种状态

  • Pending (等待态)
  • Resolved (成功态)
  • Rejected (失败态)

Promise 必须接收一个执行函数(executor)带有两个函数参数(resolved,rejected)
resolve:包裹成功执行成功数据,改变 Promise 状态
reject:失败状态

解决思路_

由于异步代码的结果需要通过回调函数获取,基于结果的其他业务逻辑
就需要卸载回调函数中,所以产生的回调地狱,如果异步代码的执行结果
可以在外部拿到,此时基于结果的其他业务逻辑代码就不需要写在业务逻辑
中了,所以promise所做的事情就是通过语法的方式,让异步代码的结果可以在
外部拿到,此时基于结果的其他业务逻辑就不需要写在回调函数中了,
就避免了回调函数嵌套的问题
_

基本实现

  1. class Promise {
  2. constructor(executor) {
  3. // 参数检验
  4. if (typeof executor !== 'function') {
  5. throw new TypeError(`Promise resolver ${executor} is a not funtion`);
  6. }
  7. this.value = null; //终值
  8. this.reason = null; //拒因
  9. this.state = 'pending'; //状态
  10. // 定义resolve函数
  11. function resolve(value) {
  12. // 成功后的一系列操作(状态的改变,成功回调的执行)
  13. if (this.status === 'pending') {
  14. this.status = 'fulfilled';
  15. this.value = value;
  16. }
  17. }
  18. // 定义reject函数
  19. function reject(reason) {
  20. // 失败后的一系列操作(状态改变,失败回调的执行)
  21. if (this.status === 'pending') {
  22. this.status = 'rejected';
  23. this.reason = reason; //拒因
  24. }
  25. }
  26. // 使用 try...catch... 捕捉代码执行过程中可能抛出的异常
  27. try {
  28. // 执行器默认会立即执行
  29. executor(resolve, reject);
  30. } catch (e) {
  31. // 如果执行时发生错误(包括手动抛出的异常),等同于执行失败
  32. reject(e);
  33. }
  34. }
  35. }
  36. Promise.prototype.then = function (onFufiled, onRejected) {
  37. let self = this;
  38. if (self.status === 'resolved') {
  39. onFufiled(self.value);
  40. }
  41. if (self.status === 'rejected') {
  42. onRejected(self.reason);
  43. }
  44. };

Promise.all和Promise.race

Promise.all

需要同时返回多个请求的数据时
image.png

Promise.race

image.png