es6 promise 源码解析

最新推荐文章于 2023-06-14 18:09:20 发布
最新推荐文章于 2023-06-14 18:09:20 发布
阅读量352 收藏
点赞数 1
分类专栏： js 基础知识总结 文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42389674/article/details/125828221
版权

promise解析

promise的状态

  1. pending   等待
  2. fulfilled 成功
  3. rejected失败

promise的状态是不可逆的 ，pending --> fulfilled 或者 pendingi --> rejected

代码中变量的定义

  1. status   promise的状态
  2. value 成功之后的值
  3. reason 失败后的原因
  4. successCallback 数组 成功的回调
  5. failCallback 失败的回调

resolve函数的封装

  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在 如果存在 调用
    // this.successCallback && this.successCallback(this.value);
    while (this.successCallback.length) this.successCallback.shift()()
  }

代码注解

if(this.status ! = pending） return 表示 状态不是进行中的时候直接终止代码执行

this.status = FUFILLED 表示将状态改为成功

this.value = value 保存成功后的值

while (this.successCallback.length) this.successCallback.shift()()

while循环 如果成功的回调函数数组长度大于 0 就依次用 shift 移除并调用

reject 函数的封装

  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败后的原因
    this.reason = reason;
    // 判断失败回调是否存在 如果存在 调用
    // this.failCallback && this.failCallback(this.reason);
    while (this.failCallback.length) this.failCallback.shift()()
  }

代码注解

 if (this.status !== PENDING) return; 表示 状态不是进行中的时候直接终止代码执行

 this.status = REJECTED;示将状态改为失败

this.reason = reason  将保存失败后的原因

 while (this.failCallback.length) this.failCallback.shift()()

while循环 如果失败的回调函数数组长度大于0 就依此调用shift移除并调用

then 方法

then(successCallback, failCallback) {
    // 参数可选
    successCallback = successCallback ? successCallback : value => value;
    // 参数可选
    failCallback = failCallback ? failCallback : reason => { throw reason };
    let promsie2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            // 判断 x 的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve 
            // 如果是promise对象 查看promsie对象返回的结果 
            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
            resolvePromise(promsie2, x, resolve, reject)
          } catch (e) {
            reject(e);
          }
        }, 0)
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason);
            // 判断 x 的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve 
            // 如果是promise对象 查看promsie对象返回的结果 
            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
            resolvePromise(promsie2, x, resolve, reject)
          } catch (e) {
            reject(e);
          }
        }, 0)
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let x = successCallback(this.value);
              // 判断 x 的值是普通值还是promise对象
              // 如果是普通值 直接调用resolve 
              // 如果是promise对象 查看promsie对象返回的结果 
              // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
              resolvePromise(promsie2, x, resolve, reject)
            } catch (e) {
              reject(e);
            }
          }, 0)
        });
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
              let x = failCallback(this.reason);
              // 判断 x 的值是普通值还是promise对象
              // 如果是普通值 直接调用resolve 
              // 如果是promise对象 查看promsie对象返回的结果 
              // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
              resolvePromise(promsie2, x, resolve, reject)
            } catch (e) {
              reject(e);
            }
          }, 0)
        });
      }
    });
    return promsie2;
  }

注解

  // 参数可选

    successCallback = successCallback ? successCallback : value => value;

    // 参数可选

    failCallback = failCallback ? failCallback : reason => { throw reason };

如果传入了回调函数，就是使用回调函数，如果没有传入回调函数就返回给下个then 

失败的 直接抛出异常

if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            // 判断 x 的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve 
            // 如果是promise对象 查看promsie对象返回的结果 
            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
            resolvePromise(promsie2, x, resolve, reject)
          } catch (e) {
            reject(e);
          }
        }, 0)
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason);
            // 判断 x 的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve 
            // 如果是promise对象 查看promsie对象返回的结果 
            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
            resolvePromise(promsie2, x, resolve, reject)
          } catch (e) {
            reject(e);
          }
        }, 0)
      }

注解

setTimeout 的作用是  所有同不代码执行完毕，再执行setTimeoutl里面的代码，否则 获取不到promise2

resolvePromise

function resolvePromise(promise2, x, resolve, reject) {
    if (promise2 === x) {
        // 如果promise出现了循环调用 报错
        reject(new TypeError("Chaining cycle detected for promise #<promise>"))
    }
    if (x instanceof MyPromise) {
        // promise对象
        // x.then( ()=>resolve(value),()=>reject(reason))
        x.then(resolve, reject)
    } else {
        // 普通值
        resolve(x)
    }
}

注解

   if (promise2 === x) {

        // 如果promise出现了循环调用 报错

        reject(new TypeError("Chaining cycle detected for promise #<promise>"))

    }  

promise2 ===x 表示promise出现了循环调用 需要调用 new TypeError 抛出异常

if (x instanceof MyPromise) {

        // promise对象

        // x.then( ()=>resolve(value),()=>reject(reason))

        x.then(resolve, reject)

    }

else {

        // 普通值

        resolve(x)

    }

如果传入的x 参数类型是 MyPromise 就 调用then方法

否则直接resolve 抛出普通值

status的状态是pending的时候的处理

this.successCallback.push(() => {
                    setTimeout(() => {
                        try {
                            // 所有同步代码执行完毕 就执行 setTimeout里的代码
                            let x = successCallback(this.value)
                            // 判断x 值是普通值 还是 promise对象
                            // 如果是普通值 直接调用 resolve
                            // 如是promise对象 查看promise对象返回的结果
                            // 再根据promise对象返回的结果  决定调用 resolve还是 reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }

                    }, 0)
                })
                this.failCallback.push(
                    setTimeout(() => {
                        try {
                            // 所有同步代码执行完毕 就执行 setTimeout里的代码
                            let x = failCallback(this.reason)
                            // 判断x 值是普通值 还是 promise对象
                            // 如果是普通值 直接调用 resolve
                            // 如是promise对象 查看promise对象返回的结果
                            // 再根据promise对象返回的结果  决定调用 resolve还是 reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }

                    }, 0))

等待 不是成功 也是失败的回调

将成功回调和失回调存储起来

all方法的实现

  static all(array) {
    let result = [];
    let index = 0;
    return new MyPromise((resolve, reject) => {
      function addData(key, value) {
        result[key] = value;
        index++;
        if (index === array.length) {
          resolve(result);
        }
      }
      for (let i = 0; i < array.length; i++) {
        let current = array[i];
        if (current instanceof MyPromise) {
          // promise 对象
          current.then(value => addData(i, value), reason => reject(reason))
        } else {
          // 普通值
          addData(i, array[i]);
        }
      }
    })
  }

注解

promise.all 传入的是个数组   array

循环这个数组 判断每一项是 MyPromise 还是 普通值

如果是普通值直接调用哦 addData方法

入宫是promise对象 就 调用then方法 再then方法的返回值中调用 addData
addData的实现

第一一个变量 index=0 和 result = []

每次调用addData 的时候i index++ 并且将值push到 result中

判断 index === array.length 如果为true 就 resolve 将 result 返回出

完整源码

const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败

class MyPromise {
  constructor (executor) {
    try {
      executor(this.resolve, this.reject)
    } catch (e) {
      this.reject(e);
    }
  }
  // promsie 状态 
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];

  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在 如果存在 调用
    // this.successCallback && this.successCallback(this.value);
    while(this.successCallback.length) this.successCallback.shift()()
  }
  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败后的原因
    this.reason = reason;
    // 判断失败回调是否存在 如果存在 调用
    // this.failCallback && this.failCallback(this.reason);
    while(this.failCallback.length) this.failCallback.shift()()
  }
  then (successCallback, failCallback) {
    // 参数可选
    successCallback = successCallback ? successCallback :value => value;
    // 参数可选
    failCallback = failCallback ? failCallback: reason => { throw reason };
    let promsie2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            // 判断 x 的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve 
            // 如果是promise对象 查看promsie对象返回的结果 
            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
            resolvePromise(promsie2, x, resolve, reject)
          }catch (e) {
            reject(e);
          }
        }, 0)
      }else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason);
            // 判断 x 的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve 
            // 如果是promise对象 查看promsie对象返回的结果 
            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
            resolvePromise(promsie2, x, resolve, reject)
          }catch (e) {
            reject(e);
          }
        }, 0)
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let x = successCallback(this.value);
              // 判断 x 的值是普通值还是promise对象
              // 如果是普通值 直接调用resolve 
              // 如果是promise对象 查看promsie对象返回的结果 
              // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
              resolvePromise(promsie2, x, resolve, reject)
            }catch (e) {
              reject(e);
            }
          }, 0)
        });
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
              let x = failCallback(this.reason);
              // 判断 x 的值是普通值还是promise对象
              // 如果是普通值 直接调用resolve 
              // 如果是promise对象 查看promsie对象返回的结果 
              // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
              resolvePromise(promsie2, x, resolve, reject)
            }catch (e) {
              reject(e);
            }
          }, 0)
        });
      }
    });
    return promsie2;
  }
  finally (callback) {
    return this.then(value => {
      return MyPromise.resolve(callback()).then(() => value);
    }, reason => {
      return MyPromise.resolve(callback()).then(() => { throw reason })
    })
  }
  catch (failCallback) {
    return this.then(undefined, failCallback)
  }
  static all (array) {
    let result = [];
    let index = 0;
    return new MyPromise((resolve, reject) => {
      function addData (key, value) {
        result[key] = value;
        index++;
        if (index === array.length) {
          resolve(result);
        }
      }
      for (let i = 0; i < array.length; i++) {
        let current = array[i];
        if (current instanceof MyPromise) {
          // promise 对象
          current.then(value => addData(i, value), reason => reject(reason))
        }else {
          // 普通值
          addData(i, array[i]);
        }
      }
    })
  }
  static resolve (value) {
    if (value instanceof MyPromise) return value;
    return new MyPromise(resolve => resolve(value));
  }
}

function resolvePromise (promsie2, x, resolve, reject) {
  if (promsie2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
        // 如果promise出现了循环调用 报错
  }
  if (x instanceof MyPromise) {
    // promise 对象
    // x.then(value => resolve(value), reason => reject(reason));
    x.then(resolve, reject);
  } else {
    // 普通值
    resolve(x);
  }
}

module.exports = MyPromise;

丰的传说
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
exploring-es6源码解析
09-10
《探索ES6源码解析》是一本深入剖析ECMAScript 6（简称ES6）语言特性的技术书籍，旨在帮助开发者全面理解并掌握这门现代JavaScript的核心内容。ES6，也被称为ECMAScript 2015，是JavaScript语言的一个重大升级版本，...
promise:一个简单的es6 promise的polyfill
04-30
在"promise-master"这个压缩包中，可能包含了Promise的源码实现、测试用例、以及构建和部署的相关脚本。开发者可以研究这些代码来理解Promise的工作原理，或者在不支持Promise的环境中使用这个polyfill来实现Promise...
ES6 Promise对象（实例调用方法promise.then/catch/finally、静态方法Promise.resolve/reject/all/race、promise实现源码）
AIWWY的博客
04-20 810
目录 Promise（function（resolve，reject）{}） promise对象调用的方法 promise.then(function(res){},function(rej){}) promise.catch(function(){}) promise.finally(function(){}) Promise上定义好的静态方法 Promise.resolve(js) Promise.reject(js) Promise.all([p1,p2,...,pn]) Prom
ES6-Promise及源码实现
爱代码的小海的博客
09-13 360
开头说明 promise实例化对象的属性值 [promiseState] promise实例化对象的属性值 [promiseResult] promise的API Promise的构造函数 [Promise(executor){}] Promise.prototype.then方法 [(onResolved, onRejected){}] Promise.prototype.catch方法 [(onRejected){}] Promise.resolve方法 属于Promise函数对象 [(value..
完整实现原生Promise
m0_46269977的博客
04-08 665
手写前需要了解这些 1.什么是宏任务 我们都知道JS是单线程的，但是一些高耗时操作就带来了进程阻塞的问题，为了解决这个问题，JS有两种任务的执行模式，同步模式和异步模式。 在异步模式下，创建异步任务主要分为宏任务和微任务两种，宏任务是由宿主（浏览器、Node）发起的，而微任务由JS自身发起。 宏任务与微任务的几种创建方式 ???? 宏任务（Macrotask）微任务（Microtask）setTimeoutrequestAnimationFrame（有争议）setIntervalMutationObserv
ES6---promise源码
赵佳敏的博客
01-14 231
function Promise(executor) { let self = this; // 保存成功的值和失败的原因 self.value = undefined; self.reason = undefined; // 专门存成功的回调 self.onResolvedCallbacks = []; // 专门存失败的回调 self.onRejectedCallbac...
2021-05-27
weixin_44194685的博客
05-28 113
目录 es6若干方法总结 对象扩展方法 1.Object.assign() 该方法可以将多个源对象属性复制到一个目标对象中 const obj1 = { a: 123, b: 234 } const obj2 = { a: 456, c: 234 } const result = Object.assign(obj1, obj2) console.log(result) // { a:456, b:234, c:234 } console.log(r...
深入理解ES6 Promise 扩展always方法
12-10
`es6-promise-always`的源码可以在GitHub上找到，地址是：[https://github.com/wendux/es6-promise-always](https://github.com/wendux/es6-promise-always)。如果你对这个扩展感兴趣或者想要查看其具体实现，可以...
JavaScript Promise迷你书(中文版)带源码
10-23
JavaScript Promise 是一种在异步编程中管理回调函数的机制，它是ES6标准引入的重要特性，极大地改善了JavaScript处理异步操作的方式。Promise 迷你书（中文版）深入浅出地介绍了这一概念，旨在帮助开发者更好地理解...
vue源码解析第一章2
10-30
Vue源码的解析对于深入理解其工作原理至关重要，特别是对于想要提升技术深度的开发者来说。本章将关注Vue源码的第一部分第二节，主要涵盖Flow工具的介绍以及源码分析前的准备工作。 Flow是一款静态类型检查工具，它...
ES6练习：学习ES6
02-15
ES6练习：学习ES6
es6
02-17
es6
Es6
02-09
Es6
功能ES6
02-22
功能ES6
ES6:ECMAScript6 又名 ES6 又名 ES 2015 演示
06-18
＃关于 ES6 简介。 在这个项目中，我介绍了涵盖 JavaScript 中最新和最伟大的概念和代码示例。 该项目使用名为 Babel 的“转译器”从 ES6 代码生成可以在任何现代浏览器中运行的 ES5 代码。 ###棕色袋子笔记 用棕色袋子做这个演示的注意事项。 将 ES6+ 代码转换为没有运行时的 vanilla ES5 演示 Babel 的“Try it out” ##设置过程 推荐运行：npm install -g karma-cli（Karma 的全局可访问性） ####Demo（由 jasmine 和 Karma 提供支持） 第一次运行安装过程 cd ~/ES6/ 安装 babel src --watch --out-dir 测试 babel external --watch --out-dir externalGenerated（节点文件） 业力开始 不要在
CommonJS模块和ES6模块的区别？深入CommonJS源码，带你手写自己的CommonJS
最新发布
weixin_51472145的博客
06-14 3206
CommonJS模块和ES6模块的区别 。深入CommonJS源码，带你手写自己的CommonJS。node模块化
JavaScript -- ES6学习代码示例加讲解
天行健 君子以自强不息，地势坤 君子以厚德载物。
01-18 804
什么是ES6? ES的全称是ECMAScript ,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。其中的6代表这个规范的版本。 ES6实际上是一个泛指，泛指ES2015及后续的版本。 1.let关键字 let声明的变量只在所处于的块级有效(所谓的块级作用域就是指的是一个大括号内的区域) if (true) { let a = 10; } console.log(a);// a is not defined. for (let i = 0;
ES6——Promise源码（原生javascript全部实现）
cnailili的博客
02-07 1253
ES6——Promise源码（原生javascript全部实现）： function MyPromise (func) { var self = this; self.status = 'pending'; //进来时就先定义一个'pending'状态；等待调用时改变状态； self.resolveValue = ...
ES6-Promise 源码阅读
weixin_34077371的博客
09-27 842
前言 此次阅读的 promise 实现是 ES6-Promise ，是 promise 的众多实现中较为完善的一个例子，从入口文件 lib/es6-promise/promise.js 开始阅读，可以看到 Promise 定义有如下的静态方法 Promise.all Promise.race Promise.resolve Promise.reject 以及挂载在 Promise.protoype...
es6 promise
04-28
ES6 Promise是JavaScript的一种异步编程方法，被广泛应用于现代的Web开发中。它是一种简化异步编程的一种技术，旨在解决传统异步编程中回调函数复杂、嵌套过深的问题。 ES6 Promise实现了一系列Promise的方法，如...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值