备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

带你手写 Promise，别再死记硬背了！！！（上）

2023-04-20 1026
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 带你手写 Promise，别再死记硬背了！！！

image.png


一、动机

Promise 是目前处理异步操作中必不可少的内容，即使你使用了 async await ，但最后得到的还是个被 Promise 包裹的内容，例如：

image.png

因此，无论是在实际学习、工作或者面试中，都无法避免 Promise 的相关使用和原理，特别是在面试中甚至会让你自己实现一个 Promise. 本文主要介绍 Promise 的一些使用和特性，并使用自己的代码去实现它对应的功能，当然注重的应该是对实现过程的理解，而不是死记硬背！！！

二、Promise 前置知识

要想要深刻了解某个知识，前提条件是：你可以不是很明白其中原理，但是你必须知道如何正常使用？因此，建议对不了解的知识，首先得学会基本使用，然后在从使用层面去接触底层原理。

基本介绍

  • Promise 实例拥有三个状态：【pending、fulfilled、rejected】. 并且这三种状态只能从 【pending --> fulfilled】 或 【pending --> rejected】, 也就是说只要当前状态不是 pending ，那么当前状态就不能被改变.

image.png

image.png

  • 1. 实例化 Promise 时，可以接收一个函数作为参数，这个函数可以接收到 resolve 和 reject 两个实例方法，用于更改当前实例的状态，并把它们接收到的参数传递给下一个 then 对应的参数中.
  • PS: Promise 中的回调是被同步执行的，但是 then 操作属于异步执行
  • 2.then 方法可以接收两个函数作为参数，第一个函数相当于执行上一个 promise 中执行 resolve 后对应的回调，第二个函数相当于执行上一个 promise 中执行 reject 后对应的回调.
// 1. 实例化 Promise 时
// 可以接收一个函数作为参数，这个函数可以接收到 resolve 和 reject 两个实例方法
// 用于更改当前实例的状态，并把它们接收到的参数传递给下一个 then 对应的参数中
  new Promise((resolve, reject) => {
    // resolve 和 reject 可以都执行，但都执行的意义不大，因为 promise 状态发生更改后，就不能在被更改
    resolve('ok');
    // reject('err');
  }).then((value) => {
    console.log("resolve callback = ", value); // 若执行 resolve，则 value = ok
  }, (reason) => {
    console.log("reject callback = ", reason); // 若执行 reject，则 value = err
  });
  // 2. then 方法可以接收两个函数作为参数：
  // 第一个函数相当于执行上一个 promise 中执行 resolve 后对应的回调
  // 第二个函数相当于执行上一个 promise 中执行 reject 后对应的回调
复制代码
  • 3. 在 then 的两个回调函数中返回的值，默认可以被下一个 then 中的第一个回调函数接收到，其实表明了，then 操作之后会得到一个新的 promise，并且这个新的 promise 的状态默认 fulfilled.
// 3. 在 then 的两个回调函数中返回的值，默认可以被下一个 then 中的第一个回调函数接收到
 // 其实表明了，then 操作之后会得到一个新的 promise，并且这个新的 promise 的状态默认 fulfilled
 let p1 = new Promise((resolve, reject) => {
    resolve('ok');
    // reject('err');
  });
 let p2 = p1.then((value) => {
    console.log("resolve p1.then = ", value); // ok
    return 'then ok';
  }, (reason) => {
    console.log("reject p1.then = ", reason);// err
    return 'then err';
  })
  p2.then((value) => {
    console.log("resolve p2.then = ", value);// ok || err
  }, (reason) => {
    console.log("reject p2.then = ", reason);
  });
复制代码
  • 4. then 中允许返回 Promise 实例，但不允许返回同一个 Promise 实例. 换句话说，不能在同一个 Promise 实例的 then 操作中返回它自己.
  • 5. then 方法中只要设置了上一个 Promise 中 reject 对应的回调，那么就可以正常接收到错误信息，否则按 JavaScript 的报错机制显示.
// 4. then 中允许返回 Promise 实例，但不允许返回同一个 Promise 实例
   // 换句话说，不能在同一个 Promise 实例的 then 操作中返回它自己
   let p1 = new Promise((resolve, reject) => {
      resolve('ok');
      // reject('err');
    });
   let p2 = p1.then((value) => {
      console.log("resolve p1.then = ", value); // ok
      return p2;
    }, (reason) => {
      console.log("reject p1.then = ", reason);// err
      return p2;
    })
    p2.then((value) => {
      console.log("resolve p2.then = ", value);// ok || err
    }, (reason) => {
      console.log("reject p2.then = ", reason);// TypeError: Chaining cycle detected for promise #<Promise>
    });
    // 5. then 方法中只要设置了上一个 Promise 中 reject 对应的回调，那么就可以正常接收到错误信息，否则按 JavaScript 的报错机制显示. 
复制代码
  • 6. Promise.all() 以数组形式接收多个 Promise ，当所有的 Promise 执行完成，且状态都为 fulfilled 时，将他们的执行结果以数组形式返回给下一个 then 操作中的 第一个函数回调，否则将发生错误的 Promise 结果，返回第二个函数回调.
// 1. p1 p2 都成功
    let p1 = new Promise((resolve, reject)=>{
      setTimeout(()=>{
        resolve('p1 success');
      },1000);
    });
    let p2 = new Promise((resolve, reject)=>{
      setTimeout(()=>{
        resolve('p2 success');
        // reject('p2 fail');
      },2000);
    });
    Promise.all([p1,p2])
    .then(value => {
      console.log('all promise success = ', value); // all promise success =  (2) ["p1 success", "p2 success"]
    },reason => {
      console.log('one promise fail = ', reason);
    });
    // 2. p1 成功 p2 失败
      let p1 = new Promise((resolve, reject)=>{
      setTimeout(()=>{
        resolve('p1 success');
      },1000);
    });
    let p2 = new Promise((resolve, reject)=>{
      setTimeout(()=>{
        // resolve('p2 success');
        reject('p2 fail');
      },2000);
    });
    Promise.all([p1,p2])
    .then(value => {
      console.log('all promise success = ', value);
    },reason => {
      console.log('one promise fail = ', reason);// one promise fail =  p2 fail
    });
复制代码
  • 7. Promise.race() 以数组形式接收多个 Promise ，只要有一个 Promise 先执行完成，无论什么状态，都以这个结果返回给下一个 then 中对应的回调函数.
let p1 = new Promise((resolve, reject)=>{
      setTimeout(()=>{
        resolve('p1 success');
        // reject('p1 fail');
      },1000);
    });
    let p2 = new Promise((resolve, reject)=>{
      setTimeout(()=>{
        resolve('p2 success');
      },2000);
    });
    Promise.race([p1,p2])
    .then(value => {
      console.log('success = ', value);// success =  p1 success
    },reason => {
      console.log('fail = ', reason);
    });
复制代码

三、实现 MyPromise

1. 实现基本功能

  • new 操作
  • resovle & reject 方法
  • then 方法
// 三种状态
const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";
// promise 接收⼀个函数参数，该函数会⽴即执⾏
class MyPromise {
  constructor(fn) {
    this.value;
    this.status = PENDING;// 默认状态
    // 这里使用 try catch 捕获中可能发生的错误
    try {
      // 这里必须要绑定 this，否则在外部调用时 this 就不会执行当前实例
      fn(this.resolve.bind(this), this.reject.bind(this));
    } catch (error) {
      this.reject.bind(this, error)
    }
  }
  resolve(value) {
    if (this.status === PENDING) {
      this.value = value;
      this.status = RESOLVED;
    }
  }
  reject(reason) {
    if (this.status === PENDING) {
      this.value = reason;
      this.status = REJECTED;
    }
  }
}
MyPromise.prototype.then = function (onResolve, onReject) {
  // 上一个 promise 实例调用了 resolve
  if(this.status === RESOLVED){
    onResolve(this.value);
  }
  // 上一个 promise 实例调用了 reject
  if(this.status === REJECTED){
    onResolve(this.value);
  }
}
复制代码

image.png

现在 MyPromise 已经已经可以处理基本的 resovle 和 reject 操作，包括 then 中也可以正常接受到对应值.

2. 考虑异步改变状态的情况

  • 暴露问题：虽然在【1】 中我们实现了最最最基本的功能，但是如果我们更改状态的方式是异步的，那么会出现什么问题呢？
  • 下面的程序会输出什么呢？答案是啥也不会输出，因为状态是通过 setTimeout 异步修改的，而 then 中的代码全是同步操作，因此，在 setTimeout 中的 resolve 执行之前，then 就已经执行了，而此时 promise 的状态还是 pending，而 panding 状态我们没有处理.
// 可以思考一下，这样的操作 MyPromise 会有什么输出？
   let p = new MyPromise((resolve, reject) => {
      setTimeout(()=>{
        resolve(1);
      },1000);
    }).then(value => {
      console.log('then resolve = ', value);
    }, reason => {
      console.log('then reject = ', reason);
    });
复制代码
  • 解决问题：缓存回调，等待执行.
// 三种状态
const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";
// promise 接收⼀个函数参数，该函数会⽴即执⾏
class MyPromise {
  constructor(fn) {
    this.value;
    this.status = PENDING;// 默认状态
    this.onResolveCallBack = [];// 缓存 onResolve 
    this.onRejectCallBack = [];// 缓存 onReject 
    // 这里使用 try catch 捕获中可能发生的错误
    try {
      // 这里必须要绑定 this，否则在外部调用时 this 就不会执行当前实例
      fn(this.resolve.bind(this), this.reject.bind(this));
    } catch (error) {
      this.reject.bind(this, error);
    }
  }
  resolve(value) {
    if (this.status === PENDING) {
      this.value = value;
      this.status = RESOLVED;
      // 遍历调用 onResolveCallBack
      this.onResolveCallBack.forEach(r => r());
    }
  }
  reject(reason) {
    if (this.status === PENDING) {
      this.value = reason;
      this.status = REJECTED;
      // 遍历调用 onRejectCallBack
      this.onRejectCallBack.forEach(r => r());
    }
  }
}
MyPromise.prototype.then = function (onResolve, onReject) {
  // 当前 promise 实例调用了 resolve
  if (this.status === RESOLVED) {
    onResolve(this.value);
  }
  // 当前 promise 实例调用了 reject
  if (this.status === REJECTED) {
    onReject(this.value);
  }
  // 当前 promise 状态为 pending，把当前的 onResolve & onReject 缓存起来
  if (this.status === PENDING) {
    this.onResolveCallBack.push(() => {
      onResolve(this.value);
    });
    this.onRejectCallBack.push(() => {
      onReject(this.value);
    });
  }


文章标签：
JavaScript
前端开发
缓存
熊的猫
目录
相关文章
云高风轻
|
5月前
|
前端开发
手写基础 promise
手写基础 promise
云高风轻
41 0
掘金防诈骗集团CEO
|
6月前
|
存储 前端开发
手写Promise方法
手写Promise方法
掘金防诈骗集团CEO
18 0
YiShier
|
6月前
|
前端开发
Promise的用法&原理&手写实现-2
Promise的用法&原理&手写实现-2
YiShier
21 1
前端技术栈
|
3月前
|
存储 前端开发 JavaScript
面试官：请手写一个Promise
面试官：请手写一个Promise
前端技术栈
34 0
鋜斗
|
8月前
|
前端开发
一篇搞懂promise
一篇搞懂promise
鋜斗
83 0
C哩C哩li
|
4月前
|
前端开发 JavaScript
手写promise
手写promise
C哩C哩li
26 1
YiShier
|
6月前
|
前端开发 JavaScript API
Promise的用法&原理&手写实现-1
Promise的用法&原理&手写实现-1
YiShier
23 0
啊理八八
|
6月前
|
设计模式 JSON 前端开发
前端面试必看（手写Promise+js设计模式+继承+函数柯里化等）JavaScript面试全通关（1/3）
前端面试必看（手写Promise+js设计模式+继承+函数柯里化等）JavaScript面试全通关（1/3）
啊理八八
42 0
TE-茶叶蛋
|
7月前
|
前端开发 JavaScript
搞懂Promise
搞懂Promise
TE-茶叶蛋
28 0
前端每日三省
|
9月前
|
前端开发
手写Promise
手写Promise
前端每日三省
63 0

热门文章

最新文章

  • 1
    Linux查看进程的内存占用情况
  • 2
    大咖云集，技术宅开趴倒计时 —— 2017 Kubernetes Meetup | 成都站
  • 3
    ubuntu安装KVM虚拟机管理virt-manager
  • 4
    OpenCV4之C++入门详解 （上）
  • 5
    vue2中computed中无法获取到this
  • 6
    Visual Basic快速入门
  • 7
    HDU 4968 Improving the GPA
  • 8
    这56家公司共同发力智慧城市
  • 9
    书写高质量JavaScript代码的要义（The Essentials of Writing High Quality JavaScript）翻译
  • 10
    linux驱动开发--字符设备：信号量
  • 1
    【软件工程】融通未来的工艺：深度解析统一过程在软件开发中的角色
    13
  • 2
    IBM SPSS Modeler分类决策树C5.0模型分析空气污染物数据
    13
  • 3
    【软件工程】走进瀑布模型：传统软件开发的经典之路
    13
  • 4
    数据分享|R语言用lme4多层次（混合效应）广义线性模型（GLM），逻辑回归分析教育留级调查数据（下）
    11
  • 5
    【软件工程】走近演化过程模型：软件开发的不断进化之路
    84
  • 6
    【Mybatis】深入学习MyBatis：概述、主要特性以及配置与映射
    13
  • 7
    【MySQL】数据库规范化的三大法则 — 一探范式设计原则
    15
  • 8
    r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现（下）
    12
  • 9
    【MySQL】数据库中为什么使用B+树不用B树
    8
  • 10
    【MySQL】SQL优化
    10

    • 相关课程

    更多
  • 5天玩转Java面向对象编程
  • Java面向对象编程

    • 相关电子书

    更多
  • 为什么要学函数式编程？
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）