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

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

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

3. 实现 then 链式调用 & then 穿透 & 异步操作 & 错误捕获

  • PS：then 穿透指当某个 then 操作中没有对应的回调处理，把当前 promise 的值透传给一下个 then. 例如：

image.png

  • 问题暴露：
  • 未实现多个 then 间的链式调用
  • 未实现 then 穿透
  • 未实现 resolve & reject 异步
  • 未捕获所有回调函数可能出现的错误，并传递给下一个 then 的 onReject 回调
  • 解决问题:
  • then 中返回一个新的 promise
  • 对 then 中接收的参数做兼容处理
  • 调用回调时，通过 setTimeout 包裹处理
  • 通过 try catch 实现错误捕获，然后调用 promise 中的 reject
// 三种状态
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;
      // setTimeout 为了保证异步顺序执行
      setTimeout(() => {
        // 遍历调用 onResolveCallBack
        this.onResolveCallBack.forEach(r => r());
      });
    }
  }
  reject(reason) {
    if (this.status === PENDING) {
      this.value = reason;
      this.status = REJECTED;
      // setTimeout 为了保证异步顺序执行
      setTimeout(() => {
        // 遍历调用 onRejectCallBack
        this.onRejectCallBack.forEach(r => r());
      });
    }
  }
}
MyPromise.prototype.then = function (onResolve, onReject) {
  // 保证 onResolve & onReject 为函数
  // 主要是为了 .then().then((v)=>v) 的情况，称之为 then 穿透
  onResolve = typeof onResolve === 'function' ? onResolve : (v) => v;
  onReject = typeof onReject === 'function' ? onReject : (v) => v;
  // 这里是为了实现链式操作
  return new MyPromise((resovle, reject) => {
    // 当前 promise 实例调用了 resolve
    if (this.status === RESOLVED) {
      // setTimeout 为了保证异步顺序执行
      setTimeout(() => {
        try {
          let result = onResolve(this.value);
          resovle(result); // 下一个 promise 的状态为 fulfilled 
        } catch (error) {
          reject(error);
        }
      });
    }
    // 当前 promise 实例调用了 reject
    if (this.status === REJECTED) {
      // setTimeout 为了保证异步顺序执行
      setTimeout(() => {
        try {
          let result = onReject(this.value);
          resovle(result); // 下一个 promise 的状态为 fulfilled
        } catch (error) {
          reject(error);
        }
      });
    }
    // 当前 promise 状态为 pending，把当前的 onResolve & onReject 缓存起来
    if (this.status === PENDING) {
      this.onResolveCallBack.push(() => {
        try {
          let result = onResolve(this.value);
          resovle(result); // 下一个 promise 的状态为 fulfilled 
        } catch (error) {
          reject(error);
        }
      });
      this.onRejectCallBack.push(() => {
        try {
          let result = onReject(this.value);
          resovle(result); // 下一个 promise 的状态为 fulfilled
        } catch (error) {
          reject(error);
        }
      });
    }
  });
}
复制代码

5. then 中的逻辑判断

  • then 手动返回 promise 实例，下一个 then 操作要依据返回的 promise 状态
  • 不允许返回当前 promise 实例本身
  • 抽取重复逻辑
// 三种状态
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;
      // setTimeout 为了保证异步顺序执行
      setTimeout(() => {
        // 遍历调用 onResolveCallBack
        this.onResolveCallBack.forEach(r => r());
      });
    }
  }
  reject(reason) {
    if (this.status === PENDING) {
      this.value = reason;
      this.status = REJECTED;
      // setTimeout 为了保证异步顺序执行
      setTimeout(() => {
        // 遍历调用 onRejectCallBack
        this.onRejectCallBack.forEach(r => r());
      });
    }
  }
}
MyPromise.prototype.then = function (onResolve, onReject) {
  // 保证 onResolve & onReject 为函数
  // 主要是为了 .then().then((v)=>v) 的情况，称之为 then 穿透
  onResolve = typeof onResolve === 'function' ? onResolve : (v) => v;
  onReject = typeof onReject === 'function' ? onReject : (v) => v;
  // 这里是为了实现链式操作
  let promise = new MyPromise((resolve, reject) => {
    // 当前 promise 实例调用了 resolve
    if (this.status === RESOLVED) {
      // setTimeout 为了保证异步顺序执行
      setTimeout(() => {
          let result = onResolve(this.value);
          transferPromiseResult(promise, result, resolve, reject);
      });
    }
    // 当前 promise 实例调用了 reject
    if (this.status === REJECTED) {
      // setTimeout 为了保证异步顺序执行
      setTimeout(() => {
          let result = onReject(this.value);
          transferPromiseResult(promise, result, resolve, reject);
      });
    }
    // 当前 promise 状态为 pending，把当前的 onResolve & onReject 缓存起来
    if (this.status === PENDING) {
      this.onResolveCallBack.push(() => {
          let result = onResolve(this.value);
          transferPromiseResult(promise, result, resolve, reject);
      });
      this.onRejectCallBack.push(() => {
          let result = onReject(this.value);
          transferPromiseResult(promise, result, resolve, reject);
      });
    }
  });
  return promise;
}
// 将上一次的 promise 的值，传递给下一个 then
function transferPromiseResult(promise, result, resolve, reject) {
  // 为了处理当前的 promise 实例，在当前的 then 被返回
  if (promise === result) {
    throw new TypeError('Chaining cycle detected for promise #<MyPromise>');
  }
  try {
    // 如果上一个 then 返回的是 MyPromise 的实例 && 不是同一个 promise 实例
    // 那只需要把 MyPromise 中的处理好的返回值传递给一下 then 即可
    if (result instanceof MyPromise) {
      result.then(resolve, reject);
    } else {
      // 正常结果，传给下一个 then
      resolve(result);
    }
  } catch (error) {
    reject(error);
  }
}
复制代码

6. 实现 MyPromise.all() & MyPromise.race()

  • 上面我们实现了大部分的功能，这里的 all 和 race 都只需要基于已有功能实现即可.
  • all --> 接收多个 promise 的数组，当全部 promise 执行完，且状态都为 fulfilled，则返回结果集，否则返回失败的结果.
  • race --> 接收多个 promise 的数组，结果取最先完成的 promise 的结果，无论状态是 fulfilled 或者是 rejected.
// 三种状态
const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";
// promise 接收⼀个函数参数，该函数会⽴即执⾏
class MyPromise {
  constructor(fn) {
    this.value;
    this.status = PENDING;
    this.onResolveCallBack = [];
    this.onRejectCallBack = [];
    // 执行传入fn
    try {
      fn(this.resolve.bind(this), this.reject.bind(this));
    } catch (error) {
      // 发生错误时，统一用 reject 方法处理
      this.reject(error);
    }
  }
  // 实例方法 resolve
  resolve(value) {
    if (this.status === PENDING) {
      this.value = value;
      this.status = RESOLVED;
      // setTimeout 保证异步执行
      setTimeout(() => {
        // 执行在 then 中存储的回调
        try {
          this.onResolveCallBack.forEach((fn) => fn && fn(this.value));
        } catch (error) {
          this.onRejectCallBack.forEach((fn) => fn && fn(error));
        }
      });
    }
  }
  // 实例方法 reject
  reject(reason) {
    if (this.status === PENDING) {
      this.value = reason;
      this.status = REJECTED;
      // setTimeout 保证异步执行
      setTimeout(() => {
        // 执行在 then 中存储的回调
        this.onRejectCallBack.forEach((fn) => fn && fn(this.value));
      });
    }
  }
  // 静态方法 resolve
  static resolve(value) {
    return new MyPromise((resolve, reject) => {
      if (value instanceof MyPromise) {
        value.then(resolve, reject);
      } else {
        resolve(value);
      }
    });
  }
  // 静态方法 reject
  static reject(value) {
    console.log(value);
    return new MyPromise((resolve, reject) => {
      if (value instanceof MyPromise) {
        value.then(resolve, reject);
      } else {
        reject(value);
      }
    });
  }
  // 静态方法 all
  static all(promiseArr) {
    // 记录每个成功的 promise 结果
    const resolveResultArr = [];
    return new MyPromise((resolve, reject) => {
      promiseArr.forEach(promise => {
        promise.then(value => {
          resolveResultArr.push(value);
          // 当两者的长度一致，表明所有 promise 执行完成，并结果都是成功的
          if (promiseArr.length === resolveResultArr.length) {
            resolve(resolveResultArr);
          }
        }, reason => {
          // 只要一个 promise 失败，就是失败
          reject(reason);
        });
      });
    });
  }
  // 静态方法 race
  static race(promiseArr) {
    return new MyPromise((resolve, reject) => {
      promiseArr.forEach(promise => {
          promise.then(value => {
            resolve(value);
          }, reason => {
            reject(reason);
          });
      });
    });
  }
}
MyPromise.prototype.then = function (onResolve, onReject) {
  // 保证 onResolve & onReject 为函数
  // 主要是为了 .then().then((v)=>v) 的情况，称之为 then 穿透
  onResolve = typeof onResolve === 'function' ? onResolve : (v) => v;
  onReject = typeof onReject === 'function' ? onReject : (v) => v;
  let promise = new MyPromise((resolve, reject) => {
    if (this.status === RESOLVED) {
      setTimeout(() => {
        // 把上一个 then 中返回的值保存 result
        let result = onResolve(this.value);
        // 传递值下一个 then
        transferPromiseResult(promise, result, resolve, reject);
      });
    }
    if (this.status === REJECTED) {
      setTimeout(() => {
        // 相当于把上一个 then 中返回的值保存 result
        let result = onReject(this.value);
        // 传递值下一个 then
        transferPromiseResult(promise, result, resolve, reject);
      });
    }
    // 在这里通过数组存储对应的回调，方便在状态改变之后进行调用
    if (this.status === PENDING) {
      this.onResolveCallBack.push(() => {
        // 把上一个 then 中返回的值保存 result
        let result = onResolve(this.value);
        // 传递值下一个 then
        transferPromiseResult(promise, result, resolve, reject);
      });
      this.onRejectCallBack.push(() => {
        // 相当于把上一个 then 中返回的值保存 result
        let result = onReject(this.value);
        // 传递值下一个 then
        transferPromiseResult(promise, result, resolve, reject);
      });
    }
  });
  return promise;
}
// 将上一次的 promise 的值，传递给下一个 then
function transferPromiseResult(promise, result, resolve, reject) {
  // 为了处理当前的 promise 实例，在当前的 then 被返回
  if (promise === result) {
    throw new TypeError('Chaining cycle detected for promise #<MyPromise>');
  }
  try {
    // 如果上一个 then 返回的是 MyPromise 的实例 && 不是同一个 promise 实例
    // 那只需要把 MyPromise 中的处理好的返回值传递给一下 then 即可
    if (result instanceof MyPromise) {
      result.then(resolve, reject);
    } else {
      // 正常结果，传给下一个 then
      resolve(result);
    }
  } catch (error) {
    reject(error);
  }
}
复制代码

完结


文章标签：
前端开发
熊的猫
目录
相关文章
云高风轻
|
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
TE-茶叶蛋
|
7月前
|
前端开发 JavaScript
搞懂Promise
搞懂Promise
TE-茶叶蛋
28 0
前端每日三省
|
9月前
|
前端开发
手写Promise
手写Promise
前端每日三省
63 0
QBorfy
|
9月前
|
前端开发 算法 安全
前端面试100道手写题（1）—— 手写Promise实现
今年的金三银四面试，遇到了很多新的面试八股文，其实心里对手写题或者算法题有一定抵触，因为实际工作中基本上就不会用到这些东西，但是正因为这些基础八股文，才能真正验证一个人对技术有多热爱的程度。也有可能近几年没有对这些基础知识进行巩固，所以干脆一狠心，先立个flag, 准备完成100道手写题。
QBorfy
200 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
    【软件工程】走近演化过程模型：软件开发的不断进化之路
    86
  • 6
    【Mybatis】深入学习MyBatis：概述、主要特性以及配置与映射
    14
  • 7
    【MySQL】数据库规范化的三大法则 — 一探范式设计原则
    15
  • 8
    r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现（下）
    12
  • 9
    【MySQL】数据库中为什么使用B+树不用B树
    8
  • 10
    【MySQL】SQL优化
    10

    • 相关课程

    更多
  • 5天玩转Java面向对象编程
  • Java面向对象编程
  • Python语言基础 - 函数、面向对象、异常处理

    • 相关电子书

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