Promise实现原理，手写promise

在JavaScript中，Promise是处理异步操作的一种机制。它是一种表示异步操作最终完成或失败的对象。
Promise对象有三种状态：pending（进行中）、fulfilled（已完成）和rejected（已拒绝）。当异步操作完成时，Promise对象被解决（fulfilled）并返回结果，或者被拒绝（rejected）并返回错误信息。
Promise对象有两个主要方法： then 和 catch 。 then 方法用于处理异步操作成功时的情况，接收一个回调函数作为参数。 catch 方法用于处理异步操作失败时的情况，也接收一个回调函数作为参数。
使用Promise可以更好地管理和处理异步操作，避免了回调地狱（callback hell）的问题。

使用Promise的简单示例：

function fetchData() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      const data = '从服务器获取的数据';
      if (data) {
        resolve(data); // 异步操作成功，将数据传递给resolve函数
      } else {
        reject('获取数据失败'); // 异步操作失败，将错误信息传递给reject函数
      }
    }, 2000);
  });
}

 // 使用Promise
fetchData()
  .then((data) => {
    console.log('获取数据成功：', data);
  })
  .catch((error) => {
    console.error('获取数据失败：', error);
  });

上面的示例中， fetchData 函数返回一个Promise对象。在异步操作完成后，如果成功获取到数据，就会调用 resolve 函数并将数据传递给它；如果获取数据失败，就会调用 reject 函数并传递错误信息。在使用Promise时，可以通过 then 方法来处理成功获取数据的情况，通过 catch 方法来处理获取数据失败的情况。

实现promise

/**
 *
 *  Promise:
 *      状态 : pending  fulfilled  rejected
 *      参数 : 一个回调函数
 *                该函数有两个参数 resolve  reject   均为函数
 *      then : 接收两个参数 onResolve onReject 成功 失败的回调函数
 *      catch : 接受一个失败的回调函数 onReject
 *
 * **/

/**
 * 首先定义状态
 * **/
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

class CustomPromise {
  constructor(callBack) {
    // 初始化状态
    this.status = PENDING;
    // 初始化resolve成功接收的值
    this.resData = undefined;
    // 初始化reject失败接收的值
    this.rejData = undefined;
    // 存储成功方法
    this.onResolveList = [];
    // 存储失败方法
    this.onRejectList = [];
    callBack(this.resolve.bind(this), this.reject.bind(this));
  }
  isPending() {
    return this.status === PENDING;
  }
  isFulfilled() {
    return this.status === FULFILLED;
  }
  isRejected() {
    return this.status === REJECTED;
  }

  resolve(data) {
    if (!this.isPending()) return;
    this.status = FULFILLED;
    this.resData = data;
    // 判断如果成功方法为true  执行成功回调
    if (this.onResolveList) {
      this.onResolveList.forEach((cb) => cb && cb(data));
    }
  }

  reject(err) {
    if (!this.isPending()) return;
    this.status = REJECTED;
    this.rejData = err;
    // 执行如果失败方法为true  执行失败回调
    if (this.onRejectList) {
      this.onRejectList.forEach((cb) => cb && cb(err));
    }
  }

  then(onResolve, onReject) {
    let p = new CustomPromise((resolve, reject) => {
      if (this.isFulfilled()) {
        try {
          resolve(onResolve(this.resData));
        } catch (error) {
          reject(error);
        }
      } else if (this.isRejected()) {
        try {
          reject(onReject(this.rejData));
        } catch (error) {
          reject(error)
        }
      } else {
       
        this.onResolveList.push(r=>{
          try {
            resolve(onResolve(this.resData))
          } catch (error) {
            reject(error)
          }
        })
        this.onRejectList.push(r=>{
          try {
            resolve(onReject(this.rejData))
          } catch (error) {
            reject(error)
          }
        })
      }
    });
    return p;
  }
}

const p = new CustomPromise((res, rej) => {
  setTimeout(() => {
    res("成功");
  }, 2000);
});

p.then((res) => {
  console.log(res);
  return res
}).then(r=>{
  console.log("r",r)
})