基于 Promise/A+ 规范手写 Promise

最新推荐文章于 2023-12-04 00:00:00 发布
最新推荐文章于 2023-12-04 00:00:00 发布
阅读量193 收藏
点赞数 2
分类专栏： JavaScript 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39157944/article/details/129254509
版权

Promise 是什么？

Promise 是一种现代化的异步实现方案，它许给我们一个承诺，承诺可能会兑现，也有可能会拒绝；承诺之后将会做一些异步的操作，结束后将会返回成功或失败，以方便下一个承诺的进行。

Promise 的简单运用

new Promise((resolve, reject) => {
  Math.random() > 0.5 ? reject("error") : resolve("success");
}).then(
  (res) => {
    console.log(res);
  },
  (err) => {
    console.log(err);
  }
);

注意以上的这个示例没有任何问题，这也是 Promise 正确的用法，也会你会拥有疑问但是没关系，继续看下去你将能理解。

Promise/A+ 规范内容

Promise 拥有三种状态

PENDING 是在 resolve 或 reject 之前之前的等待状态，是初始的状态。

FULFILLED 是在被 resolve 后的状态，意味着操作成功完成，这个状态必须拥有不可变的值（value）。

REJECTED 是在被 rejcet 后的状态，意味着操作失败，这个状态必须拥有不可变的拒绝原因（reason）。

// 定义Promise的状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

class MyPromise {
  constructor() {
    // 默认状态
    this.status = PENDING;
    // 成功的值，默认为 undefined
    this.value = undefined;
    // 失败的值，默认为 undefined
    this.reason = undefined;
  }
}

Promise 中通过 resolve、reject 分别将状态推向成功或失败。

根据规范，resolve 将状态改为 FULFILLED，reject 将状态改为 REJECTED。

class MyPromise {
  constructor() {
    // 默认状态
    this.status = PENDING;
    // 成功的值，默认为 undefined
    this.value = undefined;
    // 失败的值，默认为 undefined
    this.reason = undefined;

    // 成功处理
    const resolve = (value) => {
      if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value = value;
      }
    };

    // 失败处理
    const reject = (reason) => {
      if (this.status === PENDING) {
        this.status = REJECTED;
        this.reason = reason;
      }
    };
  }

  // 承诺者通过 resolve 和 reject 兑现或拒绝承诺
  try {
    fn(resolve, reject);
  } catch (error) {
    reject(error);
  }
}

Promise 必须拥有了 then 方法的对象和函数，并接收两个可选参数 onFulfilled、onRejected；

onFulfilled 在承诺兑现的时候必须被调用，其中第一个参数为 promise 的终值 value。

onRejected 在拒绝兑现承诺的时候必须被调用，其中第一个参数为 promise 的拒绝原因 reason。

onFulfilled、onRejected 如果不是函数，其必须被忽略，且只能被调用一次。

class MyPromise {
  constructor() {
    // xxx
  }

  // 拥有 then 方法
  then(onFulfilled, onRejected) {
    // 如果 onFulfilled 不是一个函数，给一个默认函数，返回value。
    let realOnFulfilled = onFulfilled;
    if (typeof realOnFulfilled !== "function") {
      realOnFulfilled = (value) => value;
    }
    // 如果 onRejected 不是一个函数，给一个默认函数，返回reason的Error。
    let  = onRejected;
    if (typeof realOnRejected !== "function") {
      realOnRejected = (reason) => {
        throw reason;
      };
    }

    // 如果状态为 FULFILLED，执行 realOnFulfilled 返回 value。
    if (this.status === FULFILLED) {
      realOnFulfilled(this.value);
    }

    // 如果状态为 REJECTED，执行 realOnRejected 返回 reason。
    if (this.status === REJECTED) {
      realOnRejected(this.reason);
    }
  }
}

因为根据 Promise/A+ 的规范，我们需要接受 onFulfilled, onRejected 两个函数。这也是在文章的开始通过两个函数来进行演示的原因。

new MyPromise((resolve, reject) => {
  Math.random() > 0.5 ? reject("error") : resolve("success");
}).then(
  (res) => {
    console.log(res);
  },
  (err) => {
    console.log(err);
  }
);

此时我们实现了只能处理同步任务的 Promise,我们还需要对异步任务支持，在这里通过发布订阅模式解决异步的问题。如果不太熟悉的小伙伴可以阅读上一期的文章《发布订阅模式的实现》

定义 onFulfilledCallbacks、onRejectedCallbacks用于存放成功和失败的回调。

当遇到异步函数时，then 方法执行时 promise 的状态为 PENDING，先将回调函数存放起来。

等待异步函数执行完毕后执行 resolve、reject 方法是将 onFulfilledCallbacks、onRejectedCallbacks 的方法依次执行。

class MyPromise {
  constructor(fn) {
    // 默认状态
    this.status = PENDING;
    // 成功的值，默认为 undefined
    this.value = undefined;
    // 失败的值，默认为 undefined
    this.reason = undefined;

    // 存放成功的回调
    this.onFulfilledCallbacks = [];
    // 存放失败的回调
    this.onRejectedCallbacks = [];

    // 成功处理
    const resolve = (value) => {
      if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value = value;

        // 依次将成功的回调执行
        this.onFulfilledCallbacks.forEach((cb) => {
          cb(this.value);
        });
      }
    };

    // 失败处理
    const reject = (reason) => {
      if (this.status === PENDING) {
        this.status = REJECTED;
        this.reason = reason;

        // 依次将失败的回调执行
        this.onRejectedCallbacks.forEach((cb) => {
          cb(this.reason);
        });
      }
    };

    // 承诺者通过 resolve 和 reject 兑现或拒绝承诺
    try {
      fn(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  // 拥有 then 方法
  then(onFulfilled, onRejected) {
    // 如果 onFulfilled 不是一个函数，给一个默认函数，返回value。
    let realOnFulfilled = onFulfilled;
    if (typeof realOnFulfilled !== "function") {
      realOnFulfilled = (value) => value;
    }
    // 如果 onRejected 不是一个函数，给一个默认函数，返回reason的Error。
    let realOnRejected = onRejected;
    if (typeof realOnRejected !== "function") {
      realOnRejected = (reason) => {
        throw reason;
      };
    }
    // 如果状态为 PENDING，说明执行了异步任务，状态未能立即修改，先将回调函数存储起来。
    if (this.status === PENDING) {
      this.onFulfilledCallbacks.push(realOnFulfilled);
      this.onRejectedCallbacks.push(realOnRejected);
    }

    // 如果状态为 FULFILLED，执行 realOnFulfilled 返回 value。
    if (this.status === FULFILLED) {
      realOnFulfilled(this.value);
    }

    // 如果状态为 REJECTED，执行 realOnRejected 返回 reason。
    if (this.status === REJECTED) {
      realOnRejected(this.reason);
    }
  }
}

new MyPromise((resolve, reject) => {
  // 通过 setTimeout 模拟异步任务
  setTimeout(() => {
    Math.random() > 0.5 ? reject("error") : resolve("success");
  }, 1000);
}).then(
  (res) => {
    cnsole.log(res);
  },
  (err) => {
    console.log(err);
  }
);

then 的返回值必须是一个 Promise，并且如果 onFulfilled、onRejected 报错，promise2 必须拒绝执行，并且返回拒绝原因。

以上为基础版本的 Promise,当然在 Promise/A+ 规范中还有很多的细节，有需要了解的可自行网上了解和学习，接下来我们将来继续完善 Promise 的一些常用功能。

catch

发生错误时的回调函数

class MyPromise {
  // ...
  catch(onRejected) {
    this.then(null, onRejected);
  }
}

finally

无论 Promise 状态的状态如何，都将执行的操作。

class MyPromise {
  // ...
  finally(fn) {
    return this.then(
      (value) => {
        return MyPromise.resolve(fn()).then(() => {
          return value;
        });
      },
      (error) => {
        return MyPromise.resolve(fn()).then(() => {
          throw error;
        });
      }
    );
  }
}

resolve

将现有对象转为 Promise 对象, 如果 Promise.resolve 方法的参数，不是具有 then 方法，则返回一个新的 Promise 对象，并且它的状态为 FULFILLED。

class MyPromise {
  // ...
  static resolve(value) {
    if (value instanceof MyPromise) {
      return value;
    }

    return new MyPromise((resolve) => {
      resolve(value);
    });
  }
}

reject

返回一个新的 Promise 实例，该实例的状态为 REJECTED。

class MyPromise {
  // ...
  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason);
    });
  }
}

all

将多个 Promise 实例，包装成一个新的 Promise 实例。
如果存在任何一个 reject，则返回 reject，反之 resolve。

class MyPromise {
  // ...
  static all(promiseList) {
    let result = [];

    let promise = new MyPromise((resolve, reject) => {
      promiseList.forEach((promise, idx) => {
        MyPromise.resolve(promise).then(
          (value) => {
            result[idx] = value;
            if (idx === promiseList.length - 1) {
              resolve(result);
            }
          },
          (reason) => {
            reject(reason);
          }
        );
      });
    });

    return promise;
  }
}

reject

将多个 Promise 实例，包装成一个新的 Promise 实例,返回率先改变状态的实例的结果。

class MyPromise {
  // ...
  static race(promiseList) {
    let promise = new MyPromise((resolve, reject) => {
      for (let i = 0; i < promiseList.length; i++) {
        MyPromise.resolve(promiseList[i]).then(
          (value) => {
            return resolve(value);
          },
          (reason) => {
            return reject(reason);
          }
        );
      }
    });
    return promise;
  }
}

完整代码

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

// 这里我们基于对象来实现
class MyPromise {
  constructor(fn) {
    // 默认状态
    this.status = PENDING;
    // 成功的值，默认为 undefined
    this.value = undefined;
    // 失败的值，默认为 undefined
    this.reason = undefined;

    // 存放成功的回调
    this.onFulfilledCallbacks = [];
    // 存放失败的回调
    this.onRejectedCallbacks = [];

    // 成功处理
    const resolve = (value) => {
      if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value = value;

        // 依次将成功的回调执行
        this.onFulfilledCallbacks.forEach((cb) => {
          cb(this.value);
        });
      }
    };

    // 失败处理
    const reject = (reason) => {
      if (this.status === PENDING) {
        this.status = REJECTED;
        this.reason = reason;

        // 依次将失败的回调执行
        this.onRejectedCallbacks.forEach((cb) => {
          cb(this.reason);
        });
      }
    };

    // 承诺者通过 resolve 和 reject 兑现或拒绝承诺
    try {
      fn(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  // 拥有 then 方法
  then(onFulfilled, onRejected) {
    // 如果 onFulfilled 不是一个函数，给一个默认函数，返回value。
    let realOnFulfilled = onFulfilled;
    if (typeof realOnFulfilled !== "function") {
      realOnFulfilled = (value) => value;
    }
    // 如果 onRejected 不是一个函数，给一个默认函数，返回reason的Error。
    let realOnRejected = onRejected;
    if (typeof realOnRejected !== "function") {
      realOnRejected = (reason) => {
        throw reason;
      };
    }

    // 如果状态为 pending，说明执行了异步任务，状态未能立即修改，先将回调函数存储起来。
    if (this.status === PENDING) {
      let promise2 = new MyPromise((resolve, reject) => {
        this.onFulfilledCallbacks.push(() => {
          try {
            realOnFulfilled(this.value);
          } catch (error) {
            reject(error);
          }
        });

        this.onRejectedCallbacks.push(() => {
          try {
            realOnRejected(this.reason);
          } catch (error) {
            reject(error);
          }
        });
      });
      return promise2;
    }

    // 如果状态为 fulfilled，执行 realOnFulfilled 返回 value。
    if (this.status === FULFILLED) {
      let promise2 = new MyPromise((resolve, reject) => {
        try {
          realOnFulfilled(this.value);
        } catch (error) {
          reject(error);
        }
      });
      return promise2;
    }

    // 如果状态为 rejected，执行 realOnRejected 返回 reason。
    if (this.status === REJECTED) {
      let promise2 = new MyPromise((resolve, reject) => {
        try {
          realOnRejected(this.reason);
        } catch (error) {
          reject(error);
        }
      });
      return promise2;
    }
  }

  // 发生错误时的回调函数
  catch(onRejected) {
    this.then(null, onRejected);
  }

  // 无论 Promise 状态的状态如何，都将执行的操作。
  finally(fn) {
    return this.then(
      (value) => {
        return MyPromise.resolve(fn()).then(() => {
          return value;
        });
      },
      (error) => {
        return MyPromise.resolve(fn()).then(() => {
          throw error;
        });
      }
    );
  }

  // 将现有对象转为 Promise 对象, 如果 Promise.resolve 方法的参数，不是具有 then 方法，则返回一个新的 Promise 对象，并且它的状态为 fuifilled。
  static resolve(value) {
    if (value instanceof MyPromise) {
      return value;
    }

    return new MyPromise((resolve) => {
      resolve(value);
    });
  }

  // 返回一个新的 Promise 实例，该实例的状态为 rejected。
  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason);
    });
  }

  // 将多个 Promise 实例，包装成一个新的 Promise 实例。
  // 如果存在任何一个 reject，则返回 reject，反之 resolve。
  static all(promiseList) {
    let result = [];

    let promise = new MyPromise((resolve, reject) => {
      promiseList.forEach((promise, idx) => {
        MyPromise.resolve(promise).then(
          (value) => {
            result[idx] = value;
            if (idx === promiseList.length - 1) {
              resolve(result);
            }
          },
          (reason) => {
            reject(reason);
          }
        );
      });
    });

    return promise;
  }

  // 将多个 Promise 实例，包装成一个新的 Promise 实例。
  // 返回率先改变状态的实例的结果。
  static race(promiseList) {
    let promise = new MyPromise((resolve, reject) => {
      for (let i = 0; i < promiseList.length; i++) {
        MyPromise.resolve(promiseList[i]).then(
          (value) => {
            return resolve(value);
          },
          (reason) => {
            return reject(reason);
          }
        );
      }
    });
    return promise;
  }
}

总结

Promise 是基于发布订阅模式实现的。

then 方法对于还在 pending 的任务，将回调函数 onFilfilled 和 onRejected 存入数组。

Promise 的 resolve 、 reject 方法将数组中的方法依次执行

then、catch、finally 方法会返回一个新的 Promise 方法以便链式调用。

最后

感谢你的阅读~

如果你有任何的疑问欢迎您在后台私信，我们一同探讨学习！

如果觉得这篇文章对你有所帮助，点赞、在看是最大的支持！

不二博客
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Promise.js符合promise/A+ 规范
09-17
手写promise/A+ 规范实现
一步步教你实现Promise/A+ 规范 完整版
qq_40588413的博客
02-21 3891
前言 小伙伴们大家好，这里我将带大家手写Promise，作为前端的开发者，在日常的工作中，肯定避免不了一个问题，那就是异步编程 那么什么是异步编程？ 从服务器获取数据，这个过程就叫做异步编程 在node.js中去读取文件，这个过程也是异步的 关于异步的解决方案目前有四种： callback(回调函数) generato + co库 promise async+await 今天就来...
Promise/A+ 规范详解：打造健壮异步代码的必备知识（上）
最新发布
你若盛开，清风自来
12-04 1115
Promise/A+ 规范是一种用于异步编程的规范，它定义了Promise 对象的行为和交互方式。Promise/A+ 规范的背景和重要性如下：背景：在 JavaScript 中，异步编程是一种常见的模式，例如使用回调函数事件监听器发布/订阅模式然而，这些方法存在一些问题，例如回调地狱、难以管理的异步代码流程和错误处理等。Promise/A+ 规范提供了一种更好的方式来处理异步操作，它使用 Promise 对象来表示异步操作的结果，并提供了统一的错误处理和流程控制机制。
Promise详解与实现（Promise/A+规范）
仗剑天涯，从摘要开始
03-08 500
1.什么是Promise? Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/订阅 Promise对象 这里就拿回调函数说说 1.对于回调函数 我们用Jquery的ajax获取数据时 都是以回调函数方式获取的数据 $.get(url, (data) =&g...
Promise详细解说
ww2727的博客
09-14 689
Promise详细解说
我以为我很懂Promise，直到我开始实现Promise/A+规范
前端原创分享
03-09 892
我一度以为自己很懂Promise，直到前段时间尝试去实现Promise/A+规范时，才发现自己对Promise的理解还过于浅薄。在我按照Promise/A+规范去写具体代码实现的过程中，我经历了从“很懂”到“陌生”，再到“领会”的过山车式的认知转变，对Promise有了更深刻的认识！ TL;DR：鉴于很多人不想看长文，这里直接给出我写的Promise/A+规范的Javascript实现。 github仓库：promises-aplus-robin（顺手点个star就更好了） 源码 源码注释版 promi
手写一个Promise/A+,完美通过官方872个测试用例
01-08
前段时间我用两篇文章深入讲解了异步的概念和Event Loop的底层原理，然后还讲了一种自己实现异步的...所以本文会自己实现一个遵循Promise/A+规范的Promise。实现之后，我们还要用Promise/A+官方的测试工具来测试下我
js代码-手写 promise A+
07-16
js代码-手写 promise A+
Promise-A-Plus:纯 TypeScript 手写 Promise A+
05-29
手写 Promise A+ English： 术语 解决（fulfill） 指的是一个 promise 成功时进行的一系列操作，如状态的改变、回调的执行。虽然规范中使用 fulfill 来表示解决，但是目前常用 resolve 来取代。 拒绝（reject） 指的...
[译]前端基础知识储备——Promise/A+规范
weixin_42899690的博客
10-01 172
概述 自从准备晋级之后，就拖更了很久了，既然晋级弄完了，那么也恢复更新了。 在面试别人的过程中，发现基本上没有人对整个Promise完全了解，因此希望通过这篇文章来帮助大家了解下Promise的全貌。本文的主要内容是Promise/A+规范的译文，主要是能够帮助大家了解下Promise的规范，以及解决在日常运用中遇到的一些问题。 原文地址为：Promises/A+ 如果需要测试一个Promise库是否符合Promise/A+规范，可以使用这个：https://github.com/promises-
Promise/A+规范实现
看陌生的风景的博客
09-17 151
实现： /* 概念 */ // MyPromise 是具有then方法的对象或函数，行为符合Promise/A+规范。 // thenable 是定义then方法得对象或函数 // value 是任何合法的Javascript值（包括undefined，ableable或promise） // 异常 exception throw 语句抛出的值 // reason 是表明拒绝promise的原因 /* MyPromise 的状态 */ const PENDING = "pending"; const FU
手写实现一个Promise
Hoyiie的博客
03-05 1272
手写实现promise ，promise，promise api
手写promise（一）
weixin_43956427的博客
03-02 125
Promise为JS的异步编程提供了一种解决方法 JS异步编程的方式还有： 1.发布订阅模式 2.回调函数 3.事件监听 先看下回调函数怎么实现异步编程 回调函数：函数当作参数进行传递， 当满足一定条件时，这个函数被执行 回调函数并不会马上被执行。它会在包含它的函数内的某个特定时间点被“回调”（就像它的名字一样） 模拟请求数据，当拿到数据后，打印出来 这里的回调就是打印 function showData(data) { console.log(data) } function getData(cb) {
Node.js系列--Promise规范解读
Closure 专栏
01-12 737
Promise表示一个异步操作的最终结果。与Promise最主要的交互方法是通过将函数传入它的then方法从而获取得Promise最终的值或Promise最终最拒绝（reject）的原因。 1. 术语 promise是一个包含了兼容promise规范then方法的对象或函数， thenable 是一个包含了then方法的对象或函数。 value 是任何Javascript值。 (包
node学习笔记二：promise/a+规范
zhengrong9的博客
06-08 105
一、什么是 promise/a+ 规范 每个操作都返回一样的promise对象，保证链式操作 每个链式都通过then方法 每个操作内部允许犯错，出了错误，统一由catch error处理 操作内部，也可以是一个操作链，通过reject或resolve再造流程 二、如何实现 promise/a+规范是一个通用解决方案，不只是对nodejs管用。 js实现 var Promise = function () { }; var isPromise = function (value) { ret
实现一个完美符合Promise/A+规范的Promise
liwusen的博客
04-09 1925
简要介绍：Promise允许我们通过链式调用的方式来解决“回调地狱”的问题，特别是在异步过程中，通过Promise可以保证代码的整洁性和可读性。本文主要解读Promise/A+规范，并在此规范的基础上，自己实现一个Promise. 一、Promise的使用 在了解Promise规范之前，我们知道主流的高版本浏览器已经支持ECMA中的Promise. 创建一个promise实例： var...
深入理解promise/A+规范
weixin_42738504的博客
04-27 809
相信很多前端都对promise非常熟悉，对于promise的特性也都有一定的理解，但是说到手动实现promise，这对不少人应该是一个挑战，莫急，复杂的事其核心往往很简单，复杂是因其容错处理的解决思路。 要手动实现promise就不得不来了解promiseA+规范了。 promise/A+规范 在学习promise/A+规范前我们先了解一下术语，以便理解下面规范中的统一概念 1，promise是一个有then方法的对象或函数，行为遵循本规范 2，thenable 是一个有then方法的对象或者是函数 3，
你该知道的promise（1）：Promise/A+规范中英文对照翻译
衣乌安、随笔
09-21 1235
自 es6 推出promise以来，promise强大的异步处理功能被广大开发者认可并广泛使用，那么其实现逻辑真的都非常清楚吗？这里我断断续续花了几天的时间将Promises/A+ 规范结合自己的一丝丝理解和实践做了翻译，方便大家更加容易的来理解 promise 的真实情况。 1. Terminology（术语） 1.1. “promise” is an object or function with a then method whose behavior conforms to this specif
Promise/A+
yydounai的博客
10-26 218
ES6将Promise列入了标准，提供了原生的接口，研究Promise/A+对于ES6的理解有很大的帮助。这里主要探究Promise构造函数，实例resolve方法、实例then方法以及实例子的notify方法。 const RESOLVED = 0; const REJECTED = 1; const PENDING = 2; function Promise(executor) { ...
promise A+规范
05-30
Promise A+规范是一种用于 JavaScript 中管理异步编程的标准规范。它定义了一个Promise对象及其行为，用于表示异步操作的最终完成或者失败，以及它们的结果值。Promise A+规范提供了一个标准化的接口，使得异步操作...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值