JS梳理之ES6手写Promise

es6 新特性
let const 块级作用域 以及变量提升
es5中var生明的变量是全局变量

Promise链式调用手写实现思路

// 最终场景解析
//模拟异步任务
function firstTask() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("第一任务完成");
            resolve();
        }, 1000);
    });
}
firstTask()
    .then(secondTask)
    .then(thirdTask)
    .then(() => {
        console.log("所有任务完成");
    });

// 一般的理解 就是 .then就是将任务 等浏览器丢到宏任务队列中 然后等待执行，丢的时机执行的时机都是浏览器决定的我们不用管
// .then方法 正常理解自然就是 同步执行 
// 比如这里的3个.then
// firstTask先new一个promise1
// 第一个.then方法 把任务2 关联到promise1然后再new一个promie2
// 第二个.then方法 把任务3 关联到promise2然后再new一个promie3
// 第三个.then方法 把任务4箭头函数 关联到promise3然后再new一个promie4 promise4没有再使用 结束了

// 可以看到这里的promise 每一次都在变化
// 但是考虑到 可以p1.then() p1.then()  多次调用  所以这里还是一个任务队列 用数组存储即可
// 所以promise本质上解决不了异步，异步还是浏览器宏任务微任务解决的
// promise还是一个对任务状态管理的封装  通过多次.then的方式 以及提供resolve函数的方式去写代码理逻辑
// 他的管理还是停留在回调函数  它提供了一种链式解决 回调炼狱的方案
Promise.prototype.myThen = function (doResolve,doReject) {
  return new Promise((resolve,reject)=>{
    this.resolvelist.push(doSomeThing)
    this.rejectlist.push(doSomeThing)
    // this指向Promise实例
  })
}

然后是promise手写代码

class MyPromise {
    constructor(executor) {
        this.state = 'pending'; // 初始状态
        this.value = undefined;  // 成功时的值
        this.reason = undefined; // 失败时的原因
        this.onFulfilledCallbacks = []; // 存储成功的回调
        this.onRejectedCallbacks = [];  // 存储失败的回调

        const resolve = (value) => {
            if (this.state === 'pending') {
                this.state = 'fulfilled';
                this.value = value;
                this.onFulfilledCallbacks.forEach(callback => callback(value));
            }
        };

        const reject = (reason) => {
            if (this.state === 'pending') {
                this.state = 'rejected';
                this.reason = reason;
                this.onRejectedCallbacks.forEach(callback => callback(reason));
            }
        };

        // 执行传入的函数
        try {
            executor(resolve, reject);
        } catch (error) {
            reject(error);
        }
    }

    then(onFulfilled, onRejected) {
        // 处理成功的回调
        if (this.state === 'fulfilled') {
            onFulfilled(this.value);
        }

        // 处理失败的回调
        if (this.state === 'rejected') {
            onRejected(this.reason);
        }

        // 如果状态仍然是 pending，存储回调
        if (this.state === 'pending') {
            this.onFulfilledCallbacks.push(onFulfilled);
            this.onRejectedCallbacks.push(onRejected);
        }
    }
}

//resolve方法
Promise.resolve = function(val){
  return new Promise((resolve,reject)=>{
    resolve(val)
  });
}
//reject方法
Promise.reject = function(val){
  return new Promise((resolve,reject)=>{
    reject(val)
  });
}
//race方法 
Promise.race = function(promises){
  return new Promise((resolve,reject)=>{
    for(let i=0;i<promises.length;i++){
      promises[i].then(resolve,reject)
    };
  })
}
//all方法(获取所有的promise，都执行then，把结果放到数组，一起返回)
Promise.all = function(promises){
  let arr = [];
  let i = 0;
  function processData(index,data){
    arr[index] = data;
    i++;
    if(i == promises.length){
      resolve(arr);
    };
  };
  return new Promise((resolve,reject)=>{
    for(let i=0;i<promises.length;i++){
      promises[i].then(data=>{
        processData(i,data);
      },reject);
    };
  });
}

更详细的
https://juejin.cn/post/6844903625769091079?searchId=20250327212020C49A5B664B1A5D2BCE3B