Promise基础(下)

2022-11-01 13:08:43

目录

1. 初始结构搭建

2. resolve与reject  (带注释的是新增的代码)

3. 抛出异常(带注释的是新增的代码)

4. Promise状态只能修改一次(带注释的是新增的代码)

5. then方法执行回调(带注释的是新增的代码)

6. 异步回调then方法实现(带注释的是新增的代码)

7. 指定多个回调(带注释的是修改的代码)

8. 同步状态下then返回结果(带注释的是新增的代码)

9. 异步状态下then返回结果(带注释的是新增的代码)

10.优化

11. catch方法与异常穿透(照着视频敲的,但是控制台未打印)

12.Promise.resove封装

13.Promise.reject封装

14.Promise.all封装【每个都成功才返回状态】(异步返回的数组不对: ['very Good', 'Success', 'very Good'])

15.Promise.race封装【返回第一个成功的状态】

16.回调函数【异步执行】

17.class版本封装(结果未出现,需重新观看)

18. 参考资料


1. 初始结构搭建

//Promise.html文件
<script src="./Promise.js"></script>
<script>
    let P = new Promise((resolve, reject) => {
        resolve("OK");
    });
    P.then(
        (value) => {
          console.log(value);
        },
        (reason) => {
          console.warn(reason);
        }
    );
</script>

// Promise.js文件
//声明构造函数
function Promise(executor) {};
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {};

2. resolve与reject  (带注释的是新增的代码)

// Promise.html文件
<script src="./Promise.js"></script>
<script>
      let P = new Promise((resolve, reject) => {
         resolve("OK");
       //reject("error");
      });
        console.log(P) 
</script>

// Promise.js文件
function Promise(executor) {
  //添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;

  // resolve函数
  const resolve = (data) => {
    //1. 修改对象的属性【PromiseState】
    this.PromiseState = "resolved";
    //2.修改对象结果值【PromiseResult】
    this.PromiseResult = data;
  };

  // reject函数;
  const reject = (data) => {
    //1. 修改对象的属性【PromiseState】
    this.PromiseState = "rejected";
    //2.修改对象结果值【PromiseResult】
    this.PromiseResult = data;
  };
    executor(resolve, reject);
}
Promise.prototype.then = function (onResolved, onRejected) {};

3. 抛出异常(带注释的是新增的代码)

// Promise.html文件
<script src="./Promise.js"></script>
<script>
      let P = new Promise((resolve, reject) => {
         throw '抛出异常'
      });
        console.log(P) 
</script>

// Promise.js文件
function Promise(executor) {
  this.PromiseState = "pending";
  this.PromiseResult = null;
  const resolve = (data) => {
    this.PromiseState = "resolved";
    this.PromiseResult = data;
  };
  const reject = (data) => {
    this.PromiseState = "rejected";
    this.PromiseResult = data;
  };

  //抛出异常
  try {
    executor(resolve, reject);
  } catch (e) {
    //修改promise对象状态为【失败】
    reject(e);
  }
}
Promise.prototype.then = function (onResolved, onRejected) {};

4. Promise状态只能修改一次(带注释的是新增的代码)

// Promise.html文件
<script src="./Promise.js"></script>
<script>
      let P = new Promise((resolve, reject) => {
         resolve("OK");
         reject("error");
         //throw '抛出异常'
      });
        console.log(P) 
</script>

// Promise.js文件
function Promise(executor) {
  this.PromiseState = "pending";
  this.PromiseResult = null;
  const resolve = (data) => {
    //判断状态
    if (this.PromiseState !== "pending") return;
    this.PromiseState = "resolved";
    this.PromiseResult = data;
  };
  const reject = (data) => {
    //判断状态
    if (this.PromiseState !== "pending") return;
    this.PromiseState = "rejected";
    this.PromiseResult = data;
  };

  try {
    executor(resolve, reject);
  } catch (e) {
    reject(e);
  }
}
Promise.prototype.then = function (onResolved, onRejected) {};

5. then方法执行回调(带注释的是新增的代码)

// Promise.html文件
<script src="./Promise.js"></script>
<script>
      let P = new Promise((resolve, reject) => {
         resolve("OK");
         //reject("error");
         //throw '抛出异常'
      });
      P.then(
        (value) => {
          console.log(value);
        },
        (reason) => {
          console.warn(reason);
      );
</script>

// Promise.js文件
function Promise(executor) {
  this.PromiseState = "pending";
  this.PromiseResult = null;
  const resolve = (data) => {
    if (this.PromiseState !== "pending") return;
    this.PromiseState = "resolved";
    this.PromiseResult = data;
  };
  const reject = (data) => {
    if (this.PromiseState !== "pending") return;
    this.PromiseState = "rejected";
    this.PromiseResult = data;
  };

  try {
    executor(resolve, reject);
  } catch (e) {
    reject(e);
  }
}
Promise.prototype.then = function (onResolved, onRejected) {
  //调用回调函数  PromiseState
  if (this.PromiseState === "resolved") {
    onResolved(this.PromiseResult);
  }
  if (this.PromiseState === "rejected") {
    onRejected(this.PromiseResult);
  }
};

6. 异步回调then方法实现(带注释的是新增的代码)

// Promise.html文件
<script src="./Promise.js"></script>
<script>
      let P = new Promise((resolve, reject) => {
        //异步
        setTimeout(() => {
          // resolve("OK");
          reject("error");
          // throw '抛出异常'
        }, 1000);
      });
      P.then(
        (value) => {
          console.log(value);
        },
        (reason) => {
          console.warn(reason);
      );
</script>

// Promise.js文件
function Promise(executor) {
  this.PromiseState = "pending";
  this.PromiseResult = null;
  //声明一个属性
  this.callback={};
  const resolve = (data) => {
    if (this.PromiseState !== "pending") return;
    this.PromiseState = "resolved";
    this.PromiseResult = data;
 //调用成功的回调函数 
    if(this.callback.onResolved){
        this.callback.onResolved(data)
    }
  };
  const reject = (data) => {
    if (this.PromiseState !== "pending") return;
    this.PromiseState = "rejected";
    this.PromiseResult = data;
 //调用失败的回调函数 
    if(this.callback.onRejected){
        this.callback.onRejected(data)
    }
  };

  try {
    executor(resolve, reject);
  } catch (e) {
    reject(e);
  }
}
Promise.prototype.then = function (onResolved, onRejected) {
  if (this.PromiseState === "resolved") {
    onResolved(this.PromiseResult);
  }
  if (this.PromiseState === "rejected") {
    onRejected(this.PromiseResult);
  }
//判断pending状态(异步)
  if (this.PromiseState === "pending") {
      //保存回调函数
      this.callback = {
        onResolved:onResolved,
        onRejected:onRejected
      }
  }
};

7. 指定多个回调(带注释的是修改的代码)

// Promise.html文件
<script src="./Promise.js"></script>
<script>
      let P = new Promise((resolve, reject) => {
        //异步
        setTimeout(() => {
          // resolve("OK");
          reject("error");
          // throw '抛出异常'
        }, 1000);
      });
    //第一个then
      P.then(
        (value) => {
          console.log(value);
        },
        (reason) => {
          console.warn(reason);
        }
      );
//第二个then
      P.then(
        (value) => {
          console.log(value);
        },
        (reason) => {
          console.warn(reason);
        }
      );
      console.log(P);
</script>

// Promise.js文件
function Promise(executor) {
  this.PromiseState = "pending";
  this.PromiseResult = null;
  //声明一个属性
  this.callbacks=[];
  const resolve = (data) => {
    if (this.PromiseState !== "pending") return;
    this.PromiseState = "resolved";
    this.PromiseResult = data;
 //调用成功的回调函数 
    this.callbacks.forEach(item=>{
        item.onResolved(data)
    })
  };
  const reject = (data) => {
    if (this.PromiseState !== "pending") return;
    this.PromiseState = "rejected";
    this.PromiseResult = data;
 //调用失败的回调函数 
     this.callbacks.forEach(item=>{
        item.onRejected(data)
    })
  };

  try {
    executor(resolve, reject);
  } catch (e) {
    reject(e);
  }
}
Promise.prototype.then = function (onResolved, onRejected) {
  if (this.PromiseState === "resolved") {
    onResolved(this.PromiseResult);
  }
  if (this.PromiseState === "rejected") {
    onRejected(this.PromiseResult);
  }
//判断pending状态(异步)
  if (this.PromiseState === "pending") {
     //保存回调函数
      this.callbacks.push( {
        onResolved:onResolved,
        onRejected:onRejected
      })
  }
};

8. 同步状态下then返回结果(带注释的是新增的代码)

// Promise.html文件
<script src="./Promise.js"></script>
<script>
      let P = new Promise((resolve, reject) => {
        resolve("OK");
      });
      const res= P.then(
        (value) => {
          // console.log(value);
          // return 'Hello Promise'; //非promise类型
          return new Promise((resolve, reject) => {  // promise类型
            // resolve('success');   //成功
            // reject('oh no');  //失败
            throw "Fail";  //抛出异常
          });
        },
        (reason) => {
          console.warn(reason);
      );
    console.log(res)
</script>

// Promise.js文件
function Promise(executor) {
  this.PromiseState = "pending";
  this.PromiseResult = null;
  this.callbacks=[];
  const resolve = (data) => {
    if (this.PromiseState !== "pending") return;
    this.PromiseState = "resolved";
    this.PromiseResult = data;
    this.callbacks.forEach((item) => {
      item.onResolved(data);
    });
  };
  const reject = (data) => {
    if (this.PromiseState !== "pending") return;
    this.PromiseState = "rejected";
    this.PromiseResult = data; 
    this.callbacks.forEach((item) => {
      item.onRejected(data);
    });
  };

  try {
    executor(resolve, reject);
  } catch (e) {
    reject(e);
  }
}
Promise.prototype.then = function (onResolved, onRejected) {
  return new Promise((resolve, reject) => {
    //调用回调函数  PromiseState
    //抛出异常处理(try{} catch(){})
    try {
      if (this.PromiseState === "resolved") {
        //获取回调函数的执行结果
        let result = onResolved(this.PromiseResult);
        //判断
        if (result instanceof Promise) {
          //如果是promise类型的对象
          result.then(
            (v) => {
              resolve(v);
            },
            (r) => {
              reject(r);
            }
          );
        } else {
          //结果的对象状态为【成功】
          resolve(result);
        }
      }
    } catch (e) {
      reject(e);
    }
    if (this.PromiseState === "rejected") {
      onRejected(this.PromiseResult);
    }
    if (this.PromiseState === "pending") {
      this.callbacks.push({
        onResolved: onResolved,
        onRejected: onRejected,
      });
    }
  });
};

9. 异步状态下then返回结果(带注释的是新增的代码)

// Promise.html文件
<script src="./Promise.js"></script>
<script>
      let P = new Promise((resolve, reject) => {
        setTimeout(() => {
          // resolve("OK");
          reject('Error')
        }, 1000);
      });
      let res = P.then(
        (value) => {
          // console.log(value);
          // console.log('521');
          throw '抛出异常' 
        },
        (reason) => {
          // console.warn(reason);
          throw '抛出异常' 
        }
      );
</script>

// Promise.js文件
function Promise(executor) {
  this.PromiseState = "pending";
  this.PromiseResult = null;
  this.callbacks = [];
  const resolve = (data) => {
    if (this.PromiseState !== "pending") return;
    this.PromiseState = "resolved";
    this.PromiseResult = data;
    this.callbacks.forEach((item) => {
      item.onResolved(data);
    });
  };
  const reject = (data) => {
    if (this.PromiseState !== "pending") return;
    this.PromiseState = "rejected";
    this.PromiseResult = data; 
    this.callbacks.forEach((item) => {
      item.onRejected(data);
    });
  };

  try {
    executor(resolve, reject);
  } catch (e) {
    reject(e);
  }
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
  const self = this;
  return new Promise((resolve, reject) => {
    //调用回调函数  PromiseState
    //抛出异常处理(try{} catch(){})
    try {
      if (this.PromiseState === "resolved") {
        //获取回调函数的执行结果
        let result = onResolved(this.PromiseResult);
        //判断
        if (result instanceof Promise) {
          //如果是promise类型的对象
          result.then(
            (v) => {
              resolve(v);
            },
            (r) => {
              reject(r);
            }
          );
        } else {
          //结果的对象状态为【成功】
          resolve(result);
        }
      }
    } catch (e) {
      reject(e);
    }
    if (this.PromiseState === "rejected") {
      try {
        let result = onRejected(this.PromiseResult);
        if (result instanceof Promise) {
          //如果是promise类型的对象
          result.then(
            (v) => {
              resolve(v);
            },
            (r) => {
              reject(r);
            }
          );
        } else {
          resolve(result);
        }
      } catch (e) {
        reject(e);
      }
    }
    //判断pending状态(异步)
    if (this.PromiseState === "pending") {
      //保存回调函数
      this.callbacks.push({
        onResolved: function () {
          //执行成功的回调函数
          try {
            let result = onResolved(self.PromiseResult);
            if (result instanceof Promise) {
              //如果是promise类型的对象
              result.then(
                (v) => {
                  resolve(v);
                },
                (r) => {
                  reject(r);
                }
              );
            } else {
              //结果的对象状态为【成功】
              resolve(result);
            }
          } catch (e) {
            reject(e);
          }
        },
        onRejected: function () {
          //执行成功的回调函数
          try {
            let result = onRejected(self.PromiseResult);
            if (result instanceof Promise) {
              //如果是promise类型的对象
              result.then(
                (v) => {
                  resolve(v);
                },
                (r) => {
                  reject(r);
                }
              );
            } else {
              //结果的对象状态为【成功】
              resolve(result);
            }
          } catch (e) {
            reject(e);
          }
        },
      });
    }
  });
};

10.优化

// Promise.html文件
<script src="./Promise.js"></script>
<script>
    let P = new Promise((resolve, reject) => {
        // resolve('OK');
        // reject('Error')
        // throw '抛出异常'
        setTimeout(() => {
          // resolve("OK");
          // reject("Error");
        }, 1000);
      });
      let res = P.then(
        (value) => {
          console.log(value);
        },
        (reason) => {
          console.warn(reason);
        }
      );
      console.log(res);
</script>



// Promise.js文件
//声明构造函数
function Promise(executor) {
  //  实参【resolve函数】【reject函数】,名字也可以改成a,b等等,用的时候对应即可

  //添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;

  //声明一个属性
  this.callbacks = [];

  // resolve函数
  const resolve = (data) => {
    //判断状态
    if (this.PromiseState !== "pending") return;
    //1. 修改对象的属性【PromiseState】
    this.PromiseState = "resolved";
    //2.修改对象结果值【PromiseResult】
    this.PromiseResult = data;
    //调用成功的回调函数
    this.callbacks.forEach((item) => {
      item.onResolved(data);
    });
  };

  //   reject函数;
  const reject = (data) => {
    //判断状态
    if (this.PromiseState !== "pending") return;
    //1. 修改对象的属性【PromiseState】
    this.PromiseState = "rejected";
    //2.修改对象结果值【PromiseResult】
    this.PromiseResult = data;
    //调用失败的回调函数
    this.callbacks.forEach((item) => {
      item.onRejected(data);
    });
  };
  //抛出异常
  try {
    //执行器函数是同步调用的
    executor(resolve, reject);
  } catch (e) {
    //修改promise对象状态为【失败】
    reject(e);
  }
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
  return new Promise((resolve, reject) => {
    //封装函数
    callback = (type) => {
      try {
        //获取回调函数的执行结果
        let result = type(this.PromiseResult);
        //判断
        if (result instanceof Promise) {
          //如果是promise类型的对象
          result.then(
            (v) => {
              resolve(v);
            },
            (r) => {
              reject(r);
            }
          );
        } else {
          //结果的对象状态为【成功】
          resolve(result);
        }
      } catch (e) {
        reject(e);
      }
    };
    //调用回调函数  PromiseState

    if (this.PromiseState === "resolved") {
      callback(onResolved);
    }
    if (this.PromiseState === "rejected") {
      callback(onRejected);
    }
    //判断pending状态(异步)
    if (this.PromiseState === "pending") {
      //保存回调函数
      this.callbacks.push({
        onResolved: function () {
          callback(onResolved);
        },
        onRejected: function () {
          //执行成功的回调函数
          callback(onRejected);
        },
      });
    }
  });
};

11. catch方法与异常穿透(照着视频敲的,但是控制台未打印)

// Promise.html文件
<script src="./Promise.js"></script>
<script>
    let P = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject("OK");
        }, 1000);
      });
      P.then((value) => {
          console.log(222);
        }).then(value=>{
          console.log(333)
      }).catch(reason=>{
          console.log(reason)
      })
    /*
        P.then().then((value) => {
             console.log(222);
          }).then(value=>{
             console.log(333)
          }).catch(reason=>{
             console.log(reason)
          })
    */
</script>



// Promise.js文件
//声明构造函数
function Promise(executor) {
   ...
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
 //判断回调函数参数
  if (typeof onRejected !== "function") {
    onRejected = (reason) => {
      throw reason;
    };
  }
  //第一个回调空【如上方注释代码】
  if (typeof onResolved !== "function") {
    onResolved = (value) => value;
  }
  ......
};
//添加catch方法
Promise.prototype.catch = function (onRejected) {
  return this.then(undefined, onRejected);
};

12.Promise.resove封装

// Promise.html文件
<script src="./Promise.js"></script>
<script>
    let P = new Promise.resolve("OK")
    console.log(P) //OK
    let P2 = new Promise.resolve(new Promise((resolve,reject)=>{resolve("Success")})) 
    console.log(P2) //Success
    let P3 = new Promise.resolve(Promise.resolve("OKK"));
      console.log(P3); //OKK
</script>



// Promise.js文件
//声明构造函数
function Promise(executor) {
    ......
}
     ......

//添加 resolve 方法
Promise.resolve = function (value) {
  //返回promise对象
  return new Promise((resolve, reject) => {
    if (value instanceof Promise) {
      value.then(
        (v) => {
          resolve(v);
        },
        (r) => {
          reject(r);
        }
      );
    } else {
      //状态设置为成功
      resolve(value);
    }
  });
};

13.Promise.reject封装

// Promise.html文件
<script src="./Promise.js"></script>
<script>
      let P = Promise.reject("Error");
      let P2 =  Promise.reject(new Promise((resolve, reject) => {resolve("Fail")}));
</script>



// Promise.js文件
//声明构造函数
function Promise(executor) {
    ......
}
     ......

//添加 reject 方法
Promise.reject = function (reason) {
  return new Promise((resolve, reject) => {
    reject(reason);
  });
};

14.Promise.all封装【每个都成功才返回状态】(异步返回的数组不对: ['very Good', 'Success', 'very Good'])

// Promise.html文件
<script src="./Promise.js"></script>
<script>
     let p1 = new Promise((resolve,reject)=>{
        //resolve("OK")
        setTimeout(()=>{
          resolve("OK")
        },1000)
      })
      let p2 = Promise.resolve("Success")
      let p3 = Promise.resolve("very Good")
      // 调用all方法
      let result = Promise.all([p1,p2,p3])
      console.log(result);
</script>



// Promise.js文件
//声明构造函数
function Promise(executor) {
    ......
}
     ......

//添加 Promise.all 方法
Promise.all = function (promises) {
  //返回结果为promise对象
  return new Promise((resolve, reject) => {
    //声明变量
    let count = 0;
    let arr =[]
    //遍历
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(
        (v) => {
          //得知对象的状态是成功
          //每个promise对象 都成功
          count++;
          //将当前promise对象成功的结果 存入到数组arr中
          arr[i]=v
          //判断
          if(count === promises.length){
            //修改状态
            resolve(arr)
          }
        },
        (r) => {
          reject(r);
        }
      );
    }
  });
};

15.Promise.race封装【返回第一个成功的状态】

// Promise.html文件
<script src="./Promise.js"></script>
<script>
     let p1 = new Promise((resolve,reject)=>{
        //resolve("OK")
        setTimeout(()=>{
          resolve("OK")
        },1000)
      })
      let p2 = Promise.resolve("Success")
      let p3 = Promise.resolve("very Good")
      // 调用all方法
      let result = Promise.race([p1,p2,p3])
      console.log(result);
</script>



// Promise.js文件
//声明构造函数
function Promise(executor) {
    ......
}
     ......

//添加 promise.race 方法
Promise.race = function (promises) {
  return new Promise((resolve, reject) => {
    //遍历
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(
        (v) => {
          // 修改返回对象的状态【成功】
          resolve(v);
        },
        (r) => {
          reject(r);
        }
      );
    }
  });
};

16.回调函数【异步执行】

// Promise.html文件
<script src="./Promise.js"></script>
<script>
     let p1 = new Promise((resolve,reject)=>{
        resolve("OK")
        // reject("OK")
        console.log(111);
        
      })
      p1.then(value=>{console.log(222);
      },reason=>{console.log(444);
      })
      console.log(333);
</script>



// Promise.js文件
//声明构造函数
//声明构造函数
function Promise(executor) {
  ......

  // resolve函数
  const resolve = (data) => {
    //判断状态
    if (this.PromiseState !== "pending") return;
    //1. 修改对象的属性【PromiseState】
    this.PromiseState = "resolved";
    //2.修改对象结果值【PromiseResult】
    this.PromiseResult = data;
    //调用成功的回调函数【定时器实现异步】
    setTimeout(() => {
      this.callbacks.forEach((item) => {
        item.onResolved(data);
      });
    });
  };

  //   reject函数;
  const reject = (data) => {
    //判断状态
    if (this.PromiseState !== "pending") return;
    //1. 修改对象的属性【PromiseState】
    this.PromiseState = "rejected";
    //2.修改对象结果值【PromiseResult】
    this.PromiseResult = data;
    //调用失败的回调函数【定时器实现异步】
    setTimeout(() => {
      this.callbacks.forEach((item) => {
        item.onRejected(data);
      });
    });
  };
 ......
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
     ......
   return new Promise((resolve, reject) => {
    ......
    //调用回调函数  PromiseState
    if (this.PromiseState === "resolved") {
      //【定时器实现异步】
      setTimeout(() => {
        callback(onResolved);
      });
    }
    if (this.PromiseState === "rejected") {
      //【定时器实现异步】
      setTimeout(() => {
        callback(onRejected);
      });
    }
    ......
  });
};
 ......

17.class版本封装(结果未出现,需重新观看)

// Promise.html文件
<script src="./Promise.js"></script>
<script>
     let p1 = new Promise((resolve, reject) => {
        resolve("OK");
      });
      p1.then(
        (value) => {
          console.log(value);
        },
        (reason) => {
          console.log(reason);
        }
      );
</script>



// Promise.js文件
class Promise {
  //构造方法
  constructor(executor) {
    //添加状态属性与结果值属性
    this.PromiseState = "pending";
    this.PromiseResult = null;
    // 定义callback属性,保存pending状态的回调函数
    this.callbacks = [];
    //保存实例对象的this值
    const that = this;
    //自定义resolve函数,名字不一定用resolve
    function resolve(data) {
      //判断状态是否修改过
      if (that.PromiseState !== "pending") return;
      //改变状态属性
      that.PromiseState = "fulfilled"; // 或者 resolve
      //改变结果值属性
      that.PromiseResult = data;
      //异步任务成功后执行回调函数
      setTimeout(() => {
        that.callbacks.forEach((item) => {
          item.onResolved(data);
        });
      });
    }
    //自定义reject函数
    function reject(data) {
      //判断状态是否修改过,改过就直接返回
      if (that.PromiseState !== "pending") return;
      //改变状态属性
      that.PromiseState = "rejected";
      //改变结果值属性
      that.PromiseResult = data;
      //异步任务失败后执行回调函数
      setTimeout(() => {
        that.callbacks.forEach((item) => {
          item.onRejected(data);
        });
      });
    }

    try {
      //同步调用【执行器函数】
      executor(resolve, reject);
    } catch (e) {
      //更改Promise对象为失败
      reject(e);
    }
  }
  //then方法封装
  then(onResolved, onRejected) {
    const that = this;
    //判断回调参数是否存在
    if (typeof onRejected !== "function") {
      onRejected = (reason) => {
        throw reason;
      };
    }
    if (typeof onResolved !== "function") {
      onResolved = (value) => value;
    }
    return new Promise((resolve, reject) => {
      //封装重复的部分
      function callback(type) {
        try {
          //将结果值传入
          let result = type(that.PromiseResult);
          //判断
          if (result instanceof Promise) {
            //如果是Promise对象
            result.then(
              (v) => {
                resolve(v);
              },
              (r) => {
                reject(r);
              }
            );
          } else {
            //结果对象状态为【成功】
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      }
      //如果Promise状态为fulfilled回调这个函数
      if (this.PromiseState === "fulfilled") {
        setTimeout(() => {
          callback(onResolved);
        });
      }
      //如果Promise状态为rejected回调这个函数
      if (this.PromiseState === "rejected") {
        setTimeout(() => {
          callback(onRejected);
        });
      }
      //如果Promise状态为pending,保存回调函数
      if (this.PromiseState === "pending") {
        this.callbacks.push({
          onResolved: function () {
            callback(onResolved);
          },
          onRejected: function () {
            callback(onRejected);
          },
        });
      }
    });
  }
  //catch 方法
  catch(onRejected) {
    return this.then(undefined, onRejected);
  }
  //resolve方法
  static resolve(value) {
    //返回promise对象
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) {
        value.then(
          (v) => {
            resolve(v);
          },
          (r) => {
            reject(r);
          }
        );
      } else {
        resolve(value);
      }
    });
  }
  //reject方法
  static reject(reason) {
    return new Promise((resolve, reject) => {
      reject(reason);
    });
  }
  //all方法
  static all(promises) {
    return new Promise((resolve, reject) => {
      //添加变量
      let count = 0;
      // 存放成功结果数组
      let arr = [];
      //遍历全部
      for (let i = 0; i < promises.length; i++) {
        promises[i].then(
          (v) => {
            //能进到证明其为成功
            count++;
            //保存成功结果
            arr[i] = v;
            //如果全部成功
            if (count === promises.length) {
              //状态为成功
              resolve(arr);
            }
          },
          (r) => {
            //能进到证明其为失败
            reject(r);
          }
        );
      }
    });
  }
  //race方法
  static race(promises) {
    return new Promise((resolve, reject) => {
      //遍历全部
      for (let i = 0; i < promises.length; i++) {
        promises[i].then(
          (v) => {
            //能进到证明其为成功
            //状态为成功
            resolve(v);
          },
          (r) => {
            //能进到证明其为失败
            reject(r);
          }
        );
      }
    });
  }
}

18. 参考资料

promise:尚硅谷Web前端Promise教程从入门到精通_哔哩哔哩_bilibili

  • 作者:超爱蓝莓汁
  • 原文链接:https://blog.csdn.net/weixin_54685571/article/details/122398456
    更新时间:2022-11-01 13:08:43