JavaScript异步编程规范-＞实现一个符合Promise A+规范的 Promise

置顶 已于 2024-07-23 09:19:24 修改
阅读量1.6k 收藏 39
点赞数 31
分类专栏： # JavaScript 前端 文章标签： javascript 前端 开发语言
于 2024-04-01 06:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/to_the_Future/article/details/137205326
版权

🎉 博客主页：【剑九 六千里-CSDN博客】
🎠 系列专栏：【面试题-八股系列】
💖 感谢大家点赞👍收藏⭐评论✍

在这里插入图片描述

文章目录

1.Promise基本使用

  • Promise 是一个构造函数
  • 通过 new 创建
  • 接收一个拥有 resolve、reject 两个参数的 callback
let p1 = new Promise((resolve, reject) => {});
console.log("p1", p1);

let p2 = new Promise((resolve, reject) => {
  resolve("success");
  reject("error");
});
console.log("p2", p2);

let p3 = new Promise((resolve, reject) => {
  reject("error");
  resolve("success");
});
console.log("p3", p3);

let p4 = new Promise((resolve, reject) => {
  throw "报错啦~";
});
console.log("p4", p4);

这里说明了 Promise 的五个特点：

  1. 初始化的时候，Promise状态为pending；
  2. 执行了resolve，Promise状态会变成fulfilled；
  3. 执行了reject，Promise状态会变成rejected；
  4. Promise状态不可逆，第一次成功就永久为fulfilled，第一次失败就永远状态为rejected；
  5. Promise中有throw的话，就相当于执行了reject；

在这里插入图片描述

2.实现一个Promise

2.1.resolve/reject

2.1.1.初始化状态及返回值

  • 初始状态为 pending
class myPromise {
  constructor(exector) {
    // 初始化状态及初始值
    this.initValue();
  }
  initValue() {
    this.PromiseState = "pending"; // Promise 状态
    this.PromiseResult = undefined; // Promise 返回值
  }
}

在这里插入图片描述

2.1.2.实现resolve/reject

  • new 的时候接收 resolve 和 reject，并修改状态
class myPromise {
  constructor(exector) {
    // 初始化状态及初始值
    this.initValue();
    // 执行器，当 new MyPromise()时，这个callback要接受 resolve 和 reject 函数
    exector(this.resolve, this.reject);
  }
  initValue() {
    this.PromiseState = "pending"; // Promise 状态
    this.PromiseResult = undefined; // Promise 返回值
  }
  resolve(value) {
    // 此时状态改为 fulfilled
    this.PromiseState = "fulfilled";
    // 将传递进来的参数赋值
    this.PromiseResult = value;
  }
  reject(reason) {
    // 此时状态改为 rejected
    this.PromiseState = "rejected";
    // 将传递进来的错误抛出
    this.PromiseResult = reason;
  }
}

测试：

let test = new myPromise((resolve, reject) => {
  resolve("成功啦~");
  reject("失败啦~");
});
console.log(test);

此时发现报错了，经过排查原因发现是 this 指向问题，当 new MyPromise 创建实例对象后，此时 test 上还没有绑定 resolve和reject方法；
在这里插入图片描述

增加一个 initBind 方法，用于初始化时将 this 绑定到实例对象上：

class myPromise {
  constructor(exector) {
    // 初始化状态及初始值
    this.initValue();
    // 初始化的时候改变 this 指向，将 this 指向实例对象
    this.initBind();
    // 执行器，当 new MyPromise()时，这个callback要接受 resolve 和 reject 函数
    exector(this.resolve, this.reject);
  }
  initValue() {
    this.PromiseState = "pending"; // Promise 状态
    this.PromiseResult = undefined; // Promise 返回值
  }
  initBind() {
    this.resolve = this.resolve.bind(this);
    this.reject = this.reject.bind(this);
  }
  resolve(value) {
    // 此时状态改为 fulfilled
    this.PromiseState = "fulfilled";
    // 将传递进来的参数赋值
    this.PromiseResult = value;
  }
  reject(reason) {
    // 此时状态改为 rejected
    this.PromiseState = "rejected";
    // 将传递进来的错误抛出
    this.PromiseResult = reason;
  }
}

let test = new myPromise((resolve, reject) => {
  resolve("成功啦~");
  reject("失败啦~");
});
console.log(test);

测试：

let test = new myPromise((resolve, reject) => {
  resolve("成功啦~");
  reject("失败啦~");
});

此时已经可以正常执行了：

在这里插入图片描述

2.1.3.状态不可逆

我们知道原生的 Promise 状态是不可逆的，只能改变一次，预期只执行 resolve， 但是这里也执行了 reject，改造如下：

class myPromise {
  constructor(exector) {
    // 初始化状态及初始值
    this.initValue();
    // 初始化的时候改变 this 指向，将 this 指向实例对象
    this.initBind();
    // 执行器，当 new MyPromise()时，这个callback要接受 resolve 和 reject 函数
    exector(this.resolve, this.reject);
  }
  initValue() {
    this.PromiseState = "pending"; // Promise 状态
    this.PromiseResult = undefined; // Promise 返回值
  }
  initBind() {
    this.resolve = this.resolve.bind(this);
    this.reject = this.reject.bind(this);
  }
  resolve(value) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 fulfilled
    this.PromiseState = "fulfilled";
    // 将传递进来的参数赋值
    this.PromiseResult = value;
  }
  reject(reason) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 rejected
    this.PromiseState = "rejected";
    // 将传递进来的错误抛出
    this.PromiseResult = reason;
  }
}

测试:

let test1 = new myPromise((resolve, reject) => {
  resolve("成功啦test1~");
  reject("失败啦test1~");
});
console.log(test1);

let test2 = new myPromise((resolve, reject) => {
  reject("失败啦test2~");
  resolve("成功啦test2~");
});
console.log(test2);

此时状态已不可逆：

在这里插入图片描述

2.1.4.处理throw

此时如果直接抛出错误，会怎么样呢？

let test3 = new myPromise((resolve, reject) => {
  throw "报错啦test3~";
});
console.log(test3);

由原生 Promise 可以知道，如果直接抛出错误，那么状态和 reject 执行时一样，都是 rejected ，此时不满足预期的功能：

在这里插入图片描述
继续改造，增加 try catch 来处理异常：

class myPromise {
  constructor(exector) {
    // 初始化状态及初始值
    this.initValue();
    // 初始化的时候改变 this 指向，将 this 指向实例对象
    this.initBind();
    // 执行器，当 new MyPromise()时，这个callback要接受 resolve 和 reject 函数
    try {
      // 正常执行的话，执行 exector
      exector(this.resolve, this.reject);
    } catch(err) {
      // 捕获到异常，则执行一次 reject
      this.reject(err);
    }
  }
  initValue() {
    this.PromiseState = "pending"; // Promise 状态
    this.PromiseResult = undefined; // Promise 返回值
  }
  initBind() {
    this.resolve = this.resolve.bind(this);
    this.reject = this.reject.bind(this);
  }
  resolve(value) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 fulfilled
    this.PromiseState = "fulfilled";
    // 将传递进来的参数赋值
    this.PromiseResult = value;
  }
  reject(reason) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 rejected
    this.PromiseState = "rejected";
    // 将残敌进来的错误抛出
    this.PromiseResult = reason;
  }
}

测试：

let test3 = new myPromise((resolve, reject) => {
  throw "报错啦test3~";
});
console.log(test3);

此时已经满足了预期的功能：

在这里插入图片描述

2.2.then

平时业务中then的使用一般如下：

// 马上输出 -> "成功了"
const p1 = new Promise((resolve, reject) => {
  resolve("成功了"); // 成功的话，执行 then 中的成功回调
}).then(
  (res) => console.log(res),
  (err) => console.log(err)
);

// 1秒后输出 -> "失败了"
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("失败了"); // 失败的话执行 then 中的失败回调
  }, 1000);
}).then(
  (res) => console.log(res),
  (err) => console.log(err)
);

// 链式调用 -> 输出 200
const p3 = new Promise((resolve, reject) => {
  resolve(100); // 成功的话执行 then 中成功的回调
})
  .then(
    (res) => 2 * res,
    (err) => console.log(err)
  )
  .then(
    (res) => console.log(res),
    (err) => console.log(err)
  );

总结 then 的使用规则：

  1. then 接收两个参数，一个是成功回调，一个是失败回调；
  2. 状态为 fulfilled 时执行成功回调，状态为 rejected 时执行失败回调；
  3. resolve 和 reject 可以在定时器中，并且定时器时间结束后依次执行
  4. then 可以链式调用，上一次 then 的返回值传递给下一个 then；

2.2.1.实现then

根据上面总结的规则，声明一个 then 函数：

class myPromise {
  constructor(exector) {
    // 初始化状态及初始值
    this.initValue();
    // 初始化的时候改变 this 指向，将 this 指向实例对象
    this.initBind();
    // 执行器，当 new MyPromise()时，这个callback要接受 resolve 和 reject 函数
    try {
      // 正常执行的话，执行 exector
      exector(this.resolve, this.reject);
    } catch(err) {
      // 捕获到异常，则执行一次 reject
      this.reject(err);
    }
  }
  initValue() {
    this.PromiseState = "pending"; // Promise 状态
    this.PromiseResult = undefined; // Promise 返回值
  }
  initBind() {
    this.resolve = this.resolve.bind(this);
    this.reject = this.reject.bind(this);
  }
  resolve(value) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 fulfilled
    this.PromiseState = "fulfilled";
    // 将传递进来的参数赋值
    this.PromiseResult = value;
  }
  reject(reason) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 rejected
    this.PromiseState = "rejected";
    // 将残敌进来的错误抛出
    this.PromiseResult = reason;
  }
  then(onFulfilled, onRejected) {
    // then 函数接收两个callback，一个是成功回调，一个是失败回调
    // 参数兜底处理，确保返回的都是回调函数
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (value) => value;
    onRejected = typeof onRejected === "function"
        ? onRejected
        : (reason) => {
            throw reason;
          };

    // 如果成功，则执行成功回调
    // 如果失败，则执行失败回调
    if (this.PromiseState === "fulfilled") {
      onFulfilled(this.PromiseResult);
    } else if (this.PromiseState === "rejected") {
      onRejected(this.PromiseResult);
    }
  }
}

测试：

let test1 = new myPromise((resolve, reject) => {
  resolve(10);
}).then(
  (res) => console.log(res),
  (err) => console.log(err)
);

then 的基本功能已实现：

在这里插入图片描述

2.2.2.通过队列实现setTimeout

下面的代码如何按预期的 1s 之后再执行呢？

// 1秒后输出 ”fail“
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('fail')
    }, 1000)
}).then(res => console.log(res), err => console.log(err))
  1. 我们不能保证 1s 之后才执行 then ，但是换个思路我们可以保证 then 中的回调，1s之后再执行；
  2. 在这 1s 中，可以先把 then 中的回调报错起来，等 resolve 或者 reject 执行之后，再去执行保存的回调函数。
  3. 只要执行 resolve 或者 reject 那么状态就会发生变化，只需要在状态为 pending 时使用一个数组将回调保存起来即可：
class myPromise {
  constructor(exector) {
    // 初始化状态及初始值
    this.initValue();
    // 初始化的时候改变 this 指向，将 this 指向实例对象
    this.initBind();
    // 执行器，当 new MyPromise()时，这个callback要接受 resolve 和 reject 函数
    try {
      // 正常执行的话，执行 exector
      exector(this.resolve, this.reject);
    } catch(err) {
      // 捕获到异常，则执行一次 reject
      this.reject(err);
    }
  }
  initValue() {
    this.PromiseState = "pending"; // Promise 状态
    this.PromiseResult = undefined; // Promise 返回值
    this.onFulfilledCallbacks = []; // 保存成功的回调
    this.onRejectedCallbacks = []; // 保存失败的回调
  }
  initBind() {
    this.resolve = this.resolve.bind(this);
    this.reject = this.reject.bind(this);
  }
  resolve(value) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 fulfilled
    this.PromiseState = "fulfilled";
    // 将传递进来的参数赋值
    this.PromiseResult = value;
    // 执行成功的回调
    while (this.onFulfilledCallbacks.length) {
      // 每次从队列中取出一个来执行
      this.onFulfilledCallbacks.shift()(this.PromiseResult);
    }
  }
  reject(reason) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 rejected
    this.PromiseState = "rejected";
    // 将传递进来的错误抛出
    this.PromiseResult = reason;
    // 执行成功的回调
    while (this.onRejectedCallbacks.length) {
      // 每次从队列中取出一个来执行
      this.onRejectedCallbacks.shift()(this.PromiseResult);
    }
  }
  then(onFulfilled, onRejected) {
    // then 函数接收两个callback，一个是成功回调，一个是失败回调
    // 参数兜底处理，确保返回的都是回调函数
    onFulfilled =
      typeof onFulfilled === "function" ? onFulfilled : (value) => value;
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (reason) => {
            throw reason;
          };

    // 如果成功，则执行成功回调
    // 如果失败，则执行失败回调
    if (this.PromiseState === "fulfilled") {
      onFulfilled(this.PromiseResult);
    } else if (this.PromiseState === "rejected") {
      onRejected(this.PromiseResult);
    } else if (this.PromiseState === "pending") {
      // 将成功回调放入队列
      this.onFulfilledCallbacks.push(onFulfilled);
      // 将失败回调放入队列
      this.onRejectedCallbacks.push(onRejected);
    }
  }
}

测试：

let test1 = new myPromise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功回调test1");
  }, 1000);
}).then(
  (res) => console.log(res),
  (err) => console.log(err)
);
let test2 = new myPromise((resolve, reject) => {
  setTimeout(() => {
    reject("失败回调test2");
  }, 2000);
}).then(
  (res) => console.log(res),
  (err) => console.log(err)
);

1s 之后执行成功回调，2s 之后执行失败回调，此时是满足预期的：

在这里插入图片描述

2.2.3.链式调用

此时还有一个问题，原生 Promise 是支持链式调用的，并且上一次 then 的值会传递给下一次 then，如下面这个例子:

// 链式调用 输出 200
const p3 = new Promise((resolve, reject) => {
  resolve(100)
}).then(res => 2 * res, err => console.log(err))
  .then(res => console.log(res), err => console.log(err))

// 链式调用 输出300
const p4 = new Promise((resolve, reject) => {
  resolve(100)
}).then(res => new Promise((resolve, reject) => resolve(3 * res)), err => console.log(err))
  .then(res => console.log(res), err => console.log(err))

而 MyPromise 目前还不支持。
为什么 Promise 能支持链式调用呢？
因为在 then 方法执行完成之后，返回值被包装成了一个 Promise。

  1. then 方法本身会返回一个新的 Promise 对象；
  2. 如果返回值是 promise 对象，返回值为成功，新 promise 就是成功；
  3. 如果返回值是 promise 对象，返回值为失败，新 promise 就是失败；
  4. 如果返回值非 promise 对象，新 promise 对象就是成功，值为此返回值；

改造 MyPromise ：

class MyPromise {
  constructor(exector) {
    // 初始化状态及初始值
    this.initValue();
    // 初始化的时候改变 this 指向，将 this 指向实例对象
    this.initBind();
    // 执行器，当 new MyPromise()时，这个callback要接受 resolve 和 reject 函数
    try {
      // 正常执行的话，执行 exector
      exector(this.resolve, this.reject);
    } catch (err) {
      // 补货到异常，则执行一次 reject
      this.reject(err);
    }
  }
  initValue() {
    this.PromiseState = "pending"; // Promise 状态
    this.PromiseResult = undefined; // Promise 返回值
    this.onFulfilledCallbacks = []; // 保存成功的回调
    this.onRejectedCallbacks = []; // 保存失败的回调
  }
  initBind() {
    this.resolve = this.resolve.bind(this);
    this.reject = this.reject.bind(this);
  }
  resolve(value) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 fulfilled
    this.PromiseState = "fulfilled";
    // 将传递进来的参数赋值
    this.PromiseResult = value;
    // 执行成功的回调
    while (this.onFulfilledCallbacks.length) {
      // 每次从队列中取出一个来执行
      this.onFulfilledCallbacks.shift()(this.PromiseResult);
    }
  }
  reject(reason) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 rejected
    this.PromiseState = "rejected";
    // 将传递进来的错误抛出
    this.PromiseResult = reason;
    // 执行成功的回调
    while (this.onRejectedCallbacks.length) {
      // 每次从队列中取出一个来执行
      this.onRejectedCallbacks.shift()(this.PromiseResult);
    }
  }
  then(onFulfilled, onRejected) {
    // then 函数接收两个callback，一个是成功回调，一个是失败回调
    // 参数兜底处理，确保返回的都是回调函数
    onFulfilled =
      typeof onFulfilled === "function" ? onFulfilled : (value) => value;
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (reason) => {
            throw reason;
          };
    var promiseThen = new MyPromise((resolve, reject) => {
      const handlePromise = (fn) => {
        try {
        let f = fn(this.PromiseResult);
          if (f === promiseThen) {
            // 不能返回自身
            throw new Error("不能返回自身。。。");
          }
          if (f instanceof MyPromise) {
            // 如果是 Promise 则执行对应的回调
            f.then(resolve, reject);
          } else {
            // 如果不是 Promise 则直接成功
            resolve(f);
          }
        } catch (error) {
          // 处理报错, 预防一些边界情况
          reject(error);
          throw new Error(error);
        }
      };
      // 如果成功，则执行成功回调
      // 如果失败，则执行失败回调
      if (this.PromiseState === "fulfilled") {
        // onFulfilled(this.PromiseResult);
        handlePromise(onFulfilled);
      } else if (this.PromiseState === "rejected") {
        // onRejected(this.PromiseResult);
        handlePromise(onRejected);
      } else if (this.PromiseState === "pending") {
        // 将成功回调放入队列
        this.onFulfilledCallbacks.push(handlePromise(onFulfilled));
        // 将失败回调放入队列
        this.onRejectedCallbacks.push(handlePromise(onRejected));
      }
    });

    // 返回包装的 Promise
    return promiseThen;
  }
}

测试：

const test1 = new MyPromise((resolve, reject) => {
  resolve(100);
})
  .then(
    (res) => 2 * res,
    (err) => 3 * err
  )
  .then(
    (res) => console.log("success", res),
    (err) => console.log("fail", err)
  );

const test2 = new MyPromise((resolve, reject) => {
  resolve(100);
})
  .then(
    (res) => new MyPromise((resolve, reject) => reject(2 * res)),
    (err) => new Promise((resolve, reject) => resolve(3 * err))
  )
  .then(
    (res) => console.log("success", res),
    (err) => console.log("fail", err)
  );

在这里插入图片描述

2.2.4.执行顺序

then 是微任务，因此执行会晚于全局上下文，例如：

const p = new Promise((resolve, reject) => {
    resolve(1)
}).then(res => console.log(res), err => console.log(err))

console.log(2)

// 输出顺序是 2 1

在我们的 MyPromise 中暂未实现该功能，此处可以通过 setTimeout 宏任务来将 then 异步执行：

class MyPromise {
  constructor(exector) {
    // 初始化状态及初始值
    this.initValue();
    // 初始化的时候改变 this 指向，将 this 指向实例对象
    this.initBind();
    // 执行器，当 new MyPromise()时，这个callback要接受 resolve 和 reject 函数
    try {
      // 正常执行的话，执行 exector
      exector(this.resolve, this.reject);
    } catch (err) {
      // 补货到异常，则执行一次 reject
      this.reject(err);
    }
  }
  initValue() {
    this.PromiseState = "pending"; // Promise 状态
    this.PromiseResult = undefined; // Promise 返回值
    this.onFulfilledCallbacks = []; // 保存成功的回调
    this.onRejectedCallbacks = []; // 保存失败的回调
  }
  initBind() {
    this.resolve = this.resolve.bind(this);
    this.reject = this.reject.bind(this);
  }
  resolve(value) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 fulfilled
    this.PromiseState = "fulfilled";
    // 将传递进来的参数赋值
    this.PromiseResult = value;
    // 执行成功的回调
    while (this.onFulfilledCallbacks.length) {
      // 每次从队列中取出一个来执行
      this.onFulfilledCallbacks.shift()(this.PromiseResult);
    }
  }
  reject(reason) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 rejected
    this.PromiseState = "rejected";
    // 将残敌进来的错误抛出
    this.PromiseResult = reason;
    // 执行成功的回调
    while (this.onRejectedCallbacks.length) {
      // 每次从队列中取出一个来执行
      this.onRejectedCallbacks.shift()(this.PromiseResult);
    }
  }
  then(onFulfilled, onRejected) {
    // then 函数接收两个callback，一个是成功回调，一个是失败回调
    // 参数兜底处理，确保返回的都是回调函数
    onFulfilled =
      typeof onFulfilled === "function" ? onFulfilled : (value) => value;
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (reason) => {
            throw reason;
          };
    var promiseThen = new MyPromise((resolve, reject) => {
      const handlePromise = (fn) => {
        setTimeout(() => {
          try {
            let f = fn(this.PromiseResult);
            if (f === promiseThen) {
              // 不能返回自身
              throw new Error("不能返回自身。。。");
            }
            if (f instanceof MyPromise) {
              // 如果是 Promise 则执行对应的回调
              f.then(resolve, reject);
            } else {
              // 如果不是 Promise 则直接成功
              resolve(f);
            }
          } catch (error) {
            // 处理报错, 预防一些边界情况
            reject(error);
            throw new Error(error);
          }
        });
      };
      // 如果成功，则执行成功回调
      // 如果失败，则执行失败回调
      if (this.PromiseState === "fulfilled") {
        // onFulfilled(this.PromiseResult);
        handlePromise(onFulfilled);
      } else if (this.PromiseState === "rejected") {
        // onRejected(this.PromiseResult);
        handlePromise(onRejected);
      } else if (this.PromiseState === "pending") {
        // 将成功回调放入队列
        this.onFulfilledCallbacks.push(handlePromise.bind(this, onFulfilled));
        // 将失败回调放入队列
        this.onRejectedCallbacks.push(handlePromise.bind(this, onRejected));
      }
    });

    // 返回包装的 Promise
    return promiseThen;
  }
}

测试：

const p = new MyPromise((resolve, reject) => {
  resolve(1);
}).then(
  (res) => console.log(res),
  (err) => console.log(err)
);

console.log(2);

在这里插入图片描述

2.3.其他方法

2.3.1.all

Promise.all()总结：

  1. 接收一个 Promise 数组，如果参数不是 Promise 则当做成功；
  2. 如果所有的 Promise 都成功，则返回成功的结果数组；
  3. 如果有一个 Promise 不成功，则返回这一次的失败结果；
static all(promises) {
   const result = []; // 都成功后会被返回的数组
   let count = 0; // 统计成功的次数
   return new MyPromise((resolve, reject) => {
     const addData = (index, value) => {
       result[index] = value; 
       count++;  // 成功一次则自增
       if (count === promises.length) {
   			resolve(result);
   		}
     };
     promises.forEach((promise, index) => {
       if (promise instanceof MyPromise) {
       	// 如果是 Promise，则链式调用将参数传递下去
         promise.then( (res) => {
             addData(index, res);
           },
           (err) => reject(err)
         );
       } else {
       	// 不是 Promise 也当做成功状态
         addData(index, promise);
       }
     });
   });
 }

测试：

const p1 = new MyPromise((resolve, reject) => {
  resolve(1);
});
const p2 = new MyPromise((resolve, reject) => {
  resolve(2);
});
const p3 = 3;

MyPromise.all([p1, p2, p3]).then((res) => {
  console.log(res);
});

在这里插入图片描述

2.3.2.race

Promise.race()总结：

  1. 接收一个 Promise 数组，如果参数不是 Promise 则当做成功；
  2. 哪个 Promise 最快得到结果，就返回那个结果，无论成功失败；
static race(promises) {
   return new MyPromise((resolve, reject) => {
     promises.forEach((promise, index) => {
       if (promise instanceof MyPromise) {
       	// 是Promise，则调用 then ，无论成功/失败都返回
         promise.then(
           (res) => resolve(res),
           (err) => reject(err)
         );
       } else {
       	// 不是Promise则直接返回
         resolve(promise);
       }
     });
   });
 }

测试：

const p1 = new MyPromise((resolve, reject) => {
  resolve(1);
});
const p2 = new MyPromise((resolve, reject) => {
  reject(2);
});
const p3 = 3;

MyPromise.race([p1, p2, p3]).then((res) => {
  console.log(res);
});

p3 先执行，因此返回 p3：

在这里插入图片描述

2.3.3.allsetled

Promise.allsetled()总结：

  1. 接收一个 Promise 数组，如果参数不是 Promise 则当做成功；
  2. 把每一个Promise的结果，集合成数组后返回；
static allSettled(promises) {
   return new MyPromise((resolve, reject) => {
     let result = [];
     let count = 0;
     let addData = (status, value, index) => {
       result[index] = {
         status,
         value,
       };
       count++;
       if (count === promises.length) {
         resolve(result);
       }
     };
     promises.forEach((promise, index) => {
       if (promise instanceof MyPromise) {
       	// 记录状态，不管成功失败都返回
         promise.then(
           (res) => addData("fulfilled", res, index),
           (err) => addData("rejected", err, index)
         );
       } else {
         addData("fulfilled", promise, index);
       }
     });
   });
 }

测试：

const p1 = new MyPromise((resolve, reject) => {
  resolve(1);
});
const p2 = new MyPromise((resolve, reject) => {
  reject(2);
});
const p3 = 3;

MyPromise.allSettled([p1, p2, p3]).then((res) => {
  console.log(res);
});

在这里插入图片描述

2.3.4.any

Promise.any()总结：

  1. 接收一个 Promise 数组，如果参数不是 Promise 则当做成功；
  2. 如果有一个Promise成功，则返回这个成功结果；
  3. 如果所有Promise都失败，则报错；
static any(promises) {
   return new MyPromise((resolve, reject) => {
     let count = 0;
     promises.forEach((promise, index) => {
       if (promise instanceof MyPromise) {
         promise.then(
           (res) => resolve(res),
           (err) => {
             count++;
             if (count === promises.length) {
               reject("都执行失败了~");
             }
           }
         );
       }
     });
   });
 }

测试：

const p1 = new MyPromise((resolve, reject) => {
  resolve(1);
});
const p2 = new MyPromise((resolve, reject) => {
  reject(2);
});
const p3 = 3;

MyPromise.any([p1, p2, p3]).then((res) => {
  console.log(res);
});

有一个成功则返回成功的那一个 Promise：
在这里插入图片描述

测试：

const p1 = new MyPromise((resolve, reject) => {
  reject(1);
});
const p2 = new MyPromise((resolve, reject) => {
  reject(2);
});

MyPromise.any([p1, p2]).then((res) => {
  console.log(res);
});

错误数量和接收的数组长度一致，则抛出错误：
在这里插入图片描述

3.最终代码

class MyPromise {
  constructor(exector) {
    // 初始化状态及初始值
    this.initValue();
    // 初始化的时候改变 this 指向，将 this 指向实例对象
    this.initBind();
    // 执行器，当 new MyPromise()时，这个callback要接受 resolve 和 reject 函数
    try {
      // 正常执行的话，执行 exector
      exector(this.resolve, this.reject);
    } catch (error) {
      // 捕获到异常，则执行一次 reject
      this.reject(error);
    }
  }
  initValue() {
    this.PromiseState = "pending"; // Promise 状态
    this.PromiseResult = null; // Promise 返回值
    this.onFulfilledCallbacks = []; // 保存成功的回调
    this.onRejectedCallbacks = []; // 保存失败的回调
  }
  initBind() {
    this.resolve = this.resolve.bind(this);
    this.reject = this.reject.bind(this);
  }
  resolve(value) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 fulfilled
    this.PromiseState = "fulfilled";
    // 将传递进来的参数赋值
    this.PromiseResult = value;
    // 执行成功的回调
    while (this.onFulfilledCallbacks.length) {
      // 每次从队列中取出一个来执行
      this.onFulfilledCallbacks.shift()(this.PromiseResult);
    }
  }
  reject(reason) {
    // 只要状态已经改变，就不允许继续修改状态
    if (this.PromiseState !== "pending") {
      return;
    }
    // 此时状态改为 rejected
    this.PromiseState = "rejected";
    // 将传递进来的错误抛出
    this.PromiseResult = reason;
    // 执行成功的回调
    while (this.onRejectedCallbacks.length) {
      // 每次从队列中取出一个来执行
      this.onRejectedCallbacks.shift()(this.PromiseResult);
    }
  }
  then(onFulfilled, onRejected) {
    // then 函数接收两个callback，一个是成功回调，一个是失败回调
    // 参数兜底处理，确保返回的都是回调函数
    onFulfilled =
      typeof onFulfilled === "function" ? onFulfilled : (value) => value;
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (reason) => {
            throw reason;
          };
    var promiseThen = new MyPromise((resolve, reject) => {
      const handlePromise = (fn) => {
        setTimeout(() => {
          try {
            let f = fn(this.PromiseResult);
            if (f === promiseThen) {
              // 不能返回自身
              throw new Error("不能返回自身。。。");
            }
            if (f instanceof MyPromise) {
              // 如果是 Promise 则执行对应的回调
              f.then(resolve, reject);
            } else {
              // 如果不是 Promise 则直接成功
              resolve(f);
            }
          } catch (error) {
            // 处理报错, 预防一些边界情况
            reject(error);
            throw new Error(error);
          }
        });
      };
      // 如果成功，则执行成功回调
      // 如果失败，则执行失败回调
      if (this.PromiseState === "fulfilled") {
        // onFulfilled(this.PromiseResult);
        handlePromise(onFulfilled);
      } else if (this.PromiseState === "rejected") {
        // onRejected(this.PromiseResult);
        handlePromise(onRejected);
      } else if (this.PromiseState === "pending") {
        // 将成功回调放入队列
        this.onFulfilledCallbacks.push(handlePromise.bind(this, onFulfilled));
        // 将失败回调放入队列
        this.onRejectedCallbacks.push(handlePromise.bind(this, onRejected));
      }
    });

    // 返回包装的 Promise
    return promiseThen;
  }
  static all(promises) {
    const result = [];
    let count = 0;
    return new MyPromise((resolve, reject) => {
      const addData = (index, value) => {
        result[index] = value;
        count++;
        if (count === promises.length) resolve(result);
      };
      promises.forEach((promise, index) => {
        if (promise instanceof MyPromise) {
          promise.then(
            (res) => {
              addData(index, res);
            },
            (err) => reject(err)
          );
        } else {
          addData(index, promise);
        }
      });
    });
  }

  static race(promises) {
    return new MyPromise((resolve, reject) => {
      promises.forEach((promise, index) => {
        if (promise instanceof MyPromise) {
          promise.then(
            (res) => resolve(res),
            (err) => reject(err)
          );
        } else {
          resolve(promise);
        }
      });
    });
  }

  static allSettled(promises) {
    return new MyPromise((resolve, reject) => {
      let result = [];
      let count = 0;
      let addData = (status, value, index) => {
        result[index] = {
          status,
          value,
        };
        count++;
        if (count === promises.length) {
          resolve(result);
        }
      };
      promises.forEach((promise, index) => {
        if (promise instanceof MyPromise) {
          promise.then(
            (res) => addData("fulfilled", res, index),
            (err) => addData("rejected", err, index)
          );
        } else {
          addData("fulfilled", promise, index);
        }
      });
    });
  }

  static any(promises) {
    return new MyPromise((resolve, reject) => {
      let count = 0;
      promises.forEach((promise, index) => {
        if (promise instanceof MyPromise) {
          promise.then(
            (res) => resolve(res),
            (err) => {
              count++;
              if (count === promises.length) {
                reject("都执行失败了~");
              }
            }
          );
        }
      });
    });
  }
}
剑九_六千里
关注
  • 31
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
简单实现一个promise
qq_40115279的博客
11-11 2056
我们先分析一下promise 都有哪些功能： 1、promise 是一个类，所以 我们可以使用class关键字声明 2、promise 有三种状态 pending （等待执行） fulfilled （执行成功） rejected （执行失败） - 状态只能有两种转换方式： · pending --> fulfilled · pending --> rejected - 只要状态发生了改变，这一次promise就算执行完成了。 - 不管结果是成功还是失败，都不会再变成另一种。 3.
javascript异步编程代码书写规范Promise学习笔记
12-03
首先说明，Promise是为了解决javascript异步编程时候代码书写的方式产生的。 随着javascript的发展，异步的场景越来越多。前端有AJAX，setTimeout等，后端Node异步更多。按照传统的做法，那么就是各种回调嵌回调。...
如何实现一个 Promise
LuckXinXin的博客
08-01 130
// 三种状态 const PENDING = "pending"; const RESOLVED = "resolved"; const REJECTED = "rejected"; // promise 接收一个函数参数，该函数会立即执行 function MyPromise(fn) { let _this = this; _this.currentState = PENDING; _this.value = undefined; // 用于保存 then 中的回调，只有当 promis
前端 JS 经典：Promise 详解
最新发布
weixin_64684095的博客
06-10 2170
在以前我们实现异步是用的回调函数，当一个异步请求需要依赖上一个异步请求返回的结果的时候，就会形成如下这种的调用结构。这种结构看着很杂乱且不易维护，被我们亲切的叫做。为了解决回调地狱的问题，Promise 就诞生了。。
如何实现一个 promise
primedream_RYH的博客
05-23 202
实现一个简单得promise /** * @resolveCallbackAall 存放所有成功回调 * @rejectCallbackAall 存放所有失败回调 */ let promise = function (promiseCallback) { let resolveC...
Promise进阶——如何实现一个Promise库
weixin_34379433的博客
01-02 240
概述 从上次更新Promise/A+规范后，已经很久没有更新博客了。之前由于业务需要，完成了一个TypeScript语言的Promise库。这次我们来和大家一步一步介绍下，我们如何实现一个符合Promise/A+规范的Promise库。 如果对Promise/A+规范还不太了解的同学，建议先看看上一篇博客—— [译]前端基础知识储备——Promise/A+规范 。 实现流程 首先，我们来看下，在我...
如何实现一个简单的promise
jianjieX的博客
07-07 262
一个简单的 Promise 的粗糙实现，关键点在于 当 pending 时， thenable 函数由一个队列维护 当状态变为 resolved(fulfilled) 时，队列中所有 thenable 函数执行 当 resolved 时， thenable 函数直接执行 rejected 状态同理 class Prom { static resolve (value) { if (value && value.then) { return value }
President:PresidentJS 是另一个符合 Promise A+ 的承诺库
06-22
总的来说，PresidentJS是一个值得信赖的Promise库，它的设计和实现都基于Promise A+规范，确保了在JavaScript异步编程中的高效和一致性。对于任何希望提升异步处理能力的开发者来说，PresidentJS都是一个不错的选择...
simple-promise:简单重新实现promise aplus规范
05-11
Promise是JavaScript中用于异步编程的一种机制，它提供了一种优雅的方式来处理回调地狱，使得代码更加清晰、可读性更强。在"simple-promise:简单重新实现promise aplus规范"这个项目中，开发者试图根据Promise A+...
JavaScript基础教程之如何实现一个简单的promise
12-09
【JavaScript Promise 基础教程】Promise 是 JavaScript 异步编程的一种解决方案，它代表了一个尚未完成但预期将来完成的异步操作。Promise 的核心在于它的状态管理，它有三种状态：pending（进行中）、fulfilled...
js代码-手写 promise A+
07-16
Promise A+是Promise规范的一个版本，它定义了一套标准，确保不同实现之间的兼容性。本篇文章将深入探讨如何手写符合Promise A+规范的JS代码。 首先，我们需要了解Promise的基本构造。一个Promise有三种状态：...
简单实现一个Promise
roamingcode的博客
08-23 476
Promise 实现
解析 Promise 原理，实现一个Promise
weixin_34388207的博客
09-19 478
解析 Promise 原理，实现一个Promise 概述 这篇文章旨在解析 Promise的异步实现原理，并且以 ES6中的 Promise 为蓝本实现一个简单的 Promise。 通过自己动手实现一个 Promise 对象，可以熟悉很多可能不知道的 Promise 细节，同时也能对异步的理解更提升一步。 本文假设读者对 Promise ...
promise简单实现
weixin_42619992的博客
04-21 1922
1、最简单的实现 promise有三种状态，分别是Pedding、Fulfilled、Rejected。 Pedding promise对象实例创建时的初始状态 Fulfilled可以理解为成功的状态 Rejected可以理解为失败的状态 2、构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是function类型的参数。分别是resolve和reject 3、Promise上还有then方法，then方法就是用来指定Promise对象的状态
手动实现一个Promise
feral_coder的博客
07-20 190
废话不多说，直接上代码，水平有限，欢迎大家一起讨论！ 基本思想：使用异步队列存储处理函数，再根据传入的fn来改变Promise的状态，调用相应队列里的处理函数。 function Promise(fn) { //初始化 this.status = 'PENDING' this.value = undefined this.successQueues = [] ...
JavaScript如何实现一个简洁版的promise
LuckXinXin的博客
11-09 141
示例： // 三个常量用于表示状态 const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' function MyPromise(fn) { const that = this this.state = PENDING // value 变量用于保存 resolve 或者 reject 中传入的值 this.value = null // 用于保存 the
手写实现一个promise
Month的博客
08-14 910
function myPromise (callback) { let self = this; self.status = 'pending'; self.value = undefined; self.reason = undefined; self.fullFiledArr = []; self.rejectedArr = []; function resolve (value...
实现一个Promise，了解Promise原理
weixin_51670675的博客
05-17 249
基于PromiseA+规范，实现一个Promise
Promise的实现机制（一）
zhangl的博客
05-17 2883
  开发过程异步请求很常见，但是回调地域我们还是可以去避免的，这篇文章就不再赘述Promise的具体使用方法，而是探寻一下它的实现机制。首先是一个简单的Promise的例子： function getInfo(){ return new Promise(function(reslve,reject){ http.get(url,function(result)...
promise A+规范
05-30
Promise A+规范是一种用于 JavaScript 中管理异步编程的标准规范。它定义了一个Promise对象及其行为，用于表示异步操作的最终完成或者失败，以及它们的结果值。Promise A+规范提供了一个标准化的接口，使得异步操作更加清晰、简洁和易于管理。 具体来说，Promise A+规范定义了Promise对象的状态、行为和方法，以及它们之间的关系。Promise对象有三种状态：pending（进行中）、fulfilled（已完成）和rejected（已拒绝）。当Promise对象处于pending状态时，表示异步操作正在进行中；当处于fulfilled状态时，表示异步操作已经成功完成并返回一个结果；当处于rejected状态时，则表示异步操作失败并返回一个错误信息。 Promise对象的方法包括then、catch和finally，用于注册异步操作完成时的回调函数或者错误处理函数。then方法接受两个回调函数作为参数，分别表示异步操作成功完成时和失败时的处理函数；catch方法则接受一个回调函数作为参数，表示异步操作失败时的处理函数；finally方法则接受一个回调函数作为参数，表示无论异步操作成功或失败都会执行的处理函数。 Promise A+规范提供了一种清晰、可靠、统一的异步编程方式，使得开发者能够更加轻松地编写和管理异步代码，提高代码的可读性和可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

剑九_六千里

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值