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
    评论
专栏目录
javascript异步编程代码书写规范Promise学习笔记
12-03
首先说明，Promise是为了解决javascript异步编程时候代码书写的方式产生的。 随着javascript的发展，异步的场景越来越多。前端有AJAX，setTimeout等，后端Node异步更多。按照传统的做法，那么就是各种回调嵌回调。...
js基础之Promise（全面+手写实现）
m0_49159526的博客
04-14 3646
Promise是处理异步操作的优秀方案，可以使代码更加简洁、易读、易维护，避免回调地狱和嵌套过深的问题。掌握Promise可以提高开发效率、减少代码错误和提高代码质量。本文介绍了Promise的概念、用法和手写实现方法，对于前端开发，了解并学会手写实现Promise，会让你的js基础更上一层楼。
原生JS实现Promise（详解）
weixin_46726346的博客
08-16 3497
摘要 首先呢，Promise是异步中比较重要的知识点，学习的最好方法就是掌握它的基本原理。 所以这一篇主要说一下如何用JS来实现一个自己的promise。 构造函数 首先我们来看一下我们是如何使用promise的，我们在实例化对象是这么使用的： let p1 = new Promise((resolve, reject) => { let random = Math.floor(Math.random() * 10); if (random > 4) {
JavaScript异步编程规范-＞实现一个简易版本的 Promise_js实现一个promise
最新发布
2401_85124329的博客
06-10 676
此时发现报错了，经过排查原因发现是 this 指向问题，当 new MyPromise 创建实例对象后，此时 test 上还没有绑定 resolve和reject方法；状态是不可逆的，只能改变一次，预期只执行。下面的代码如何按预期的 1s 之后再执行呢？可以知道，如果直接抛出错误，那么状态和。方法执行完成之后，返回值被包装成了一个。此时如果直接抛出错误，会怎么样呢？中暂未实现该功能，此处可以通过。是支持链式调用的，并且上一次。根据上面总结的规则，声明一个。此时还有一个问题，原生。， 但是这里也执行了。
如何用 JavaScript 实现Promise
qq_41361668的博客
03-18 1445
如何用 JavaScript 实现Promise，promise 的加深理解，手动实现promise
promise简单实现
weixin_42619992的博客
04-21 1920
1、最简单的实现 promise有三种状态，分别是Pedding、Fulfilled、Rejected。 Pedding promise对象实例创建时的初始状态 Fulfilled可以理解为成功的状态 Rejected可以理解为失败的状态 2、构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是function类型的参数。分别是resolve和reject 3、Promise上还有then方法，then方法就是用来指定Promise对象的状态
【JavaScript】Promise 的使用
Superman_H的博客
03-16 4137
Promise 是一套处理异步场景的规范，能避免回调地狱的产生，使代码更清晰简洁。这套规范最早诞生于前端社区，并被命名为 Promise A+ 规范。参数executor称为执行器，为一回调函数调用resolve，Promise 实例的状态会从 pending 变为 fulfilled；调用reject，Promise 实例的状态会从 pending 变为 rejected；如果不调用resolvereject，则 Promise 实例的状态将一直是 pending。调用resolve。
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有三种状态：...
JS高级 之 Promise 详解
玄鱼殇
08-08 4277
JS高级 之 Promise 详解
JS系列 (十) - Promise用法的详细解析
qq_44376306的博客
01-29 244
第一，我们需要自己来设计回调函数、回调函数的名称、回调函数的使用等；第二，对于不同的人、不同的框架设计出来的方案是不同的，那么我们必须耐心去看别人的源码或者文档，以便可以理解它这个函数到底怎么用；我们来看一下Promise的API是怎么样的：Promise是一个类，可以翻译成承诺、许诺 、期约；当我们需要给予调用者一个承诺：待会儿我会给你回调数据时，就可以创建一个Promise的对象；在通过new创建Promise对象时，我们需要传入一个回调函数，我们称之为executor。
详细介绍Node.js中Promise对象的基本用法
Web+
05-09 2457
什么是Promise？ Promise是一个构造函数，方法有all、reject、resolve这几个，原型上有then、catch等方法。那么new Promise 出来的对象肯定就有then、catch方法。 让我们new一个吧： var promise = new Promise(function(resolve, reject) { //异步操作 setTimeout(fu...
万字详解JavaScript手写一个Promise
百创科技
06-26 326
手写Promise现在已经成了面试的热门内容，但在实际开发中基本都不会去手写一个Promise，但是在面试中各种手写题可能就会遇到一个手写Promise，我们可以尽量提高我们的上限，从而获取更多的工作机会。
超详细！手把手带你实现一个完整的Promise
Coding home - 漂流瓶jz
10-04 662
本文首先介绍了JavaScript中异步编程的几种方式，再对Promise进行了简单介绍。然后从创建类开始，一步一步实现一个完整的Promise。我们实现的Promise不仅可以通过Promises/A+规范测试，并且提供了与ECMAScript同样的实用函数。
JavaScript之Promise的实现
weixin_47303886的博客
09-29 773
什么是Promise对象 Promise对象代表了未来将来发生的事件，用来传递异步操作的信息。简单来说，Promise就是用来处理异步操作的。 为什么要使用Promise对象 在没有Promise对象之前，我们是如何
简单实现一个promise
qq_40115279的博客
11-11 2054
我们先分析一下promise 都有哪些功能： 1、promise 是一个类，所以 我们可以使用class关键字声明 2、promise 有三种状态 pending （等待执行） fulfilled （执行成功） rejected （执行失败） - 状态只能有两种转换方式： · pending --> fulfilled · pending --> rejected - 只要状态发生了改变，这一次promise就算执行完成了。 - 不管结果是成功还是失败，都不会再变成另一种。 3.
实现一个promise
weixin_44759938的博客
06-27 120
resolve参数是一个函数。当调用resolve函数时，它会将当前Promise对象的状态从pending变为fulfilled,并将传入的参数作为新Promise对象的值。如果传入的参数不是一个Promise对象，那么它会被立即执行，并作为新Promise对象的值。当调用reject函数时，它会将当前Promise对象的状态从pending变为rejected,并将传入的参数作为新Promise对象的值。如果传入的参数不是一个Promise对象，那么它会被立即执行，并作为新Promise对象的值。
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、付费专栏及课程。

余额充值