Promise 源码

最新推荐文章于 2022-11-27 13:53:34 发布
最新推荐文章于 2022-11-27 13:53:34 发布
阅读量129 收藏
点赞数
分类专栏： Part1-1 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44600183/article/details/115921177
版权

一、Promise 类核心逻辑实现

1.Promise 逻辑分析

  • Promise 就是一个类 在执行这个类的时候 需要传递一个执行器进去 执行器会立即执行
  • Promise 中有三种状态 分别是 成功 fulfilled 、失败 rejected 、 pending
    • pending => fulfilled
    • pending => rejected
    • 一旦状态确定就不可更改
  • resolve 和 reject 函数是用来更改状态的
    • resolve : fulfilled
    • reject : rejected
  • then 方法内部就是判断 promise 内部状态，如果是成功，就调用成功回调函数，如果是失败，就调用失败回调函数
    • then 方法是被定义在原型对象中的

2.Promise 逻辑分析代码实现

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


class MyPromise {
  constructor (executor) {
    executor(this.resolve, this.reject);
  }
  // promise 状态
  status = PENDING;
  // promise 成功之后的值
  value = undefined;
  reason = undefined;
  // promise 失败后的原因
  resolve = value => {
    // 如果状态不是等待 组织程序向下执行
    if (this.status != PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
  }
  reject = reason => {
    // 如果状态不是等待 组织程序向下执行
    if (this.status != PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败后的原因
    this.reason = reason;
  }
  then(successCallback, failCallback){
    // 判断状态
    if (this.status === FULFILLED) {
      successCallback(this.value);
    } else if (this.status === REJECTED) {
      failCallback(this.reason);
    }
  }
}
module.exports = MyPromise;

// index.js
let MyPromise = require('./myPromise');
let promise  = new MyPromise ( (resolve, reject) => {
  resolve('成功');
  reject('失败');
} ) 

promise.then( value => {
  console.log(value);
}, reason => {
  console.log(reason);
} )

2.在 Promise 中加入异步逻辑

  • 当给 Promise 中的立即执行函数是异步的时候，我们在给 .then 原型方法中就要把传递的两个成功和失败的回调函数给保存在 Promise 这个类的变量中。等待立即执行函数的异步代码调用。
// Mypromise.js 
const PENDING = 'pending';   // 等待
const FULFILLED = 'fulfilled';    // 成功
const REJECTED = 'rejected';      // 失败


class MyPromise {
  // promise 状态
  status = PENDING;
  // promise 成功之后的值
  value = undefined;
   // promise 失败后的原因
  reason = undefined;
  // 用来保存 .then 中成功的回调函数
  successCallback = undefined;
  // 用来保存 .then 中失败的回调函数
  failCallback = undefined;

  constructor (executor) {
    executor(this.resolve, this.reject);
  }
  resolve = value => {
    // 如果状态不是等待 组织程序向下执行
    if (this.status != PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value; 
     // 判断 成功回调函数 successCallback 是否存在 如果存在就去调用它并给参数值
     this.successCallback && this.successCallback(value)   
  }
  reject = reason => {
    // 如果状态不是等待 组织程序向下执行
    if (this.status != PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败后的原因
    this.reason = reason;
   // 判断 失败回调函数 successCallback 是否存在 如果存在就去调用它并给参数值
   this.failCallback && this.failCallback(reason);   
  }
  then(successCallback, failCallback){
    // 判断状态
    if (this.status === FULFILLED) {
      successCallback(this.value);
    } else if (this.status === REJECTED) {
      failCallback(this.reason);
    }else {
      this.successCallback = successCallback;
      this.failCallback = failCallback;
    }
  }
}
module.exports = MyPromise;		// commonJs的导出语法 因为是在nodejs红中调用的。

// index.js
let MyPromise = require('./myPromise');		// commonJs的导出、入语法 因为是在nodejs中调用的。
let promise  = new MyPromise ( (resolve, reject) => {
  setTimeout(() => {
    resolve('成功');  
    // reject('失败');
  }, 2000);
} ) 

promise.then( value => {
  console.log(value);
}, reason => {
  console.log(reason);
} )

3.实现 .then 方法 多次调用添加多个回调函数

  • 在 Promise 中多次调用 then 方法时我们应该把 then 方法中传递过来的方法用数组保存起来，然后在执行回调的时候用数组弹出栈的方法取出并调用该方法 shift()
// myPromise.js
const PENDING = 'pending';   // 等待
const FULFILLED = 'fulfilled';    // 成功
const REJECTED = 'rejected';      // 失败


class MyPromise {
  // promise 状态
  status = PENDING;
  // promise 成功之后的值
  value = undefined;
   // promise 失败后的原因
  reason = undefined;
  // 用来保存 .then 中成功的回调函数
  successCallback = [];
  // 用来保存 .then 中失败的回调函数
  failCallback = []

  constructor (executor) {
    executor(this.resolve, this.reject);
  }
  resolve = value => {
    // 如果状态不是等待 组织程序向下执行
    if (this.status != PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value; 
     // 判断 成功回调函数 successCallback 是否存在 如果存在就去调用它并给参数值
    //  this.successCallback && this.successCallback(value)  
    while (this.successCallback.length) this.successCallback.shift()(value)
  }
  reject = reason => {
    // 如果状态不是等待 组织程序向下执行
    if (this.status != PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败后的原因
    this.reason = reason;
   // 判断 失败回调函数 successCallback 是否存在 如果存在就去调用它并给参数值
  //  this.failCallback && this.failCallback(reason); 
  while (this.failCallback.length) this.failCallback.shift()(reason);  
  }
  then(successCallback, failCallback){
    // 判断状态
    if (this.status === FULFILLED) {
      successCallback(this.value);
    } else if (this.status === REJECTED) {
      failCallback(this.reason);
    }else {
      this.successCallback.push(successCallback);		// 添加多次调用 then 的成功方法
      this.failCallback.push(failCallback);				// 添加多次调用 then 的失败方法
    }
  }
}
module.exports = MyPromise;

// index.js 中多次调用then方法
let MyPromise = require('./myPromise');
let promise  = new MyPromise ( (resolve, reject) => {
  setTimeout(() => {
    resolve('成功  .........');  
    // reject('失败');
  }, 2000);
} ) 

promise.then( value => {
  console.log(1);
  console.log(value);
}, reason => {
  console.log(reason);
} )
promise.then( value => {
  console.log(2);
  console.log(value);
}, reason => {
  console.log(reason);
} )
promise.then( value => {
  console.log(3);
  console.log(value);
}, reason => {
  console.log(reason);
} )

4. then 方法的链式调用

then 链式调用（上）

promise.then(value => {
  console.log(value);
}).then( value => {
  console.log(value);
})
  1. 在链式调用第一个 then 方法的时候 应该返回 一个 Promise 并且立即执行当前 中的方法 , 好让下次继续链式调用
  2. 返回 Promise 的时候应当记录当前上一个 then 方法返回的参数
// myPromise.js
const PENDING = 'pending';   // 等待
const FULFILLED = 'fulfilled';    // 成功
const REJECTED = 'rejected';      // 失败


class MyPromise {
  // promise 状态
  status = PENDING;
  // promise 成功之后的值
  value = undefined;
   // promise 失败后的原因
  reason = undefined;
  // 用来保存 .then 中成功的回调函数
  successCallback = [];
  // 用来保存 .then 中失败的回调函数
  failCallback = []

  constructor (executor) {
    executor(this.resolve, this.reject);
  }
  resolve = value => {
    // 如果状态不是等待 组织程序向下执行
    if (this.status != PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value; 
     // 判断 成功回调函数 successCallback 是否存在 如果存在就去调用它并给参数值
    //  this.successCallback && this.successCallback(value)  
    while (this.successCallback.length) this.successCallback.shift()(value)
  }
  reject = reason => {
    // 如果状态不是等待 组织程序向下执行
    if (this.status != PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败后的原因
    this.reason = reason;
   // 判断 失败回调函数 successCallback 是否存在 如果存在就去调用它并给参数值
  //  this.failCallback && this.failCallback(reason); 
  while (this.failCallback.length) this.failCallback.shift()(reason);  
  }
  then(successCallback, failCallback){
    let promise2 = new Promise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        let x= successCallback(this.value);
        return resolve(x)
      } else if (this.status === REJECTED) {
        let y = failCallback(this.reason);
        return reject(y)
      }else {
        this.successCallback.push(successCallback);
        this.failCallback.push(failCallback);
      }
    })
    return promise2
  }
}
module.exports = MyPromise;

// index.js
let MyPromise = require('./myPromise');
let promise  = new MyPromise ( (resolve, reject) => {
  // setTimeout(() => {
    resolve('成功  .........');  
    // reject('失败');
  // }, 2000);
} ) 

promise.then( value => {
  console.log(value);
  return 100
}).then( value => {
  console.log(value);
})

then 链式调用（下）

  1. 判断额 x 的值是普通对象还是 promise 对象
  2. ​ 如果是普通值 直接调用 resolve
  3. ​ 如果是 promise 对象 查看promisee 对象返回的结果
  4. ​ 再根据 promise 对象返回的结果 决定调用resolve 还是调用reject
// myPromise.js
const PENDING = 'pending';   // 等待
const FULFILLED = 'fulfilled';    // 成功
const REJECTED = 'rejected';      // 失败


class MyPromise {
  // promise 状态
  status = PENDING;
  // promise 成功之后的值
  value = undefined;
   // promise 失败后的原因
  reason = undefined;
  // 用来保存 .then 中成功的回调函数
  successCallback = [];
  // 用来保存 .then 中失败的回调函数
  failCallback = []

  constructor (executor) {
    executor(this.resolve, this.reject);
  }
  resolve = value => {
    // 如果状态不是等待 组织程序向下执行
    if (this.status != PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value; 
     // 判断 成功回调函数 successCallback 是否存在 如果存在就去调用它并给参数值
    //  this.successCallback && this.successCallback(value)  
    while (this.successCallback.length) this.successCallback.shift()(value)
  }
  reject = reason => {
    // 如果状态不是等待 组织程序向下执行
    if (this.status != PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败后的原因
    this.reason = reason;
   // 判断 失败回调函数 successCallback 是否存在 如果存在就去调用它并给参数值
  //  this.failCallback && this.failCallback(reason); 
  while (this.failCallback.length) this.failCallback.shift()(reason);  
  }
  then(successCallback, failCallback){
    let promise2 = new Promise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        // 判断额 x 的值是普通对象还是 promise 对象
        // 如果是普通值 直接调用 resolve
        // 如果是 promise 对象 查看promisee 对象返回的结果
        // 再根据 promise 对象返回的结果 决定调用resolve 还是调用reject
        let x= successCallback(this.value);
        resolvePromise ( x, resolve, reject);
        // return resolve(x)
      } else if (this.status === REJECTED) {
        let y = failCallback(this.reason);
        return reject(y)
      }else {
        this.successCallback.push(successCallback);
        this.failCallback.push(failCallback);
      }
    })
    return promise2
  }
}

function resolvePromise ( x, resolve, reject) {
  if ( x instanceof MyPromise) {
    // promise 对象
    // x.then(value => resolve(value), reason => reject(reason));
    x.then(resolve, reject)
  } else {
    // 普通值
    resolve(x);
  }
}
module.exports = MyPromise;

// index.js
let MyPromise = require('./myPromise');
let promise  = new MyPromise ( (resolve, reject) => {
  // setTimeout(() => {
    resolve('成功  .........');  
    // reject('失败');
  // }, 2000);
} ) 

function other() {
  return new MyPromise((resolve, reject) => {
    resolve('other');
  } )
}

promise.then( value => {
  console.log(value);
  return other()
}).then( value => {
  console.log(value);
})

5.then 方法链式调用识别 Promise 对象自返回

林初笔墨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
promise源码实现
celi_echo的博客
03-18 366
本篇文章主要在于探究 Promise 的实现原理，带领大家一步一步实现一个 Promise , 不对其用法做说明，如果读者还对Promise的用法不了解，可以查看阮一峰老师的ES6 Promise教程。 接下来，带你一步一步实现一个 Promise 1. Promise 基本结构 new Promise((resolve, reject) => { setTimeout(() =&gt...
Promise源码
weixin_44341294的博客
08-19 178
手写Promise源码 class Promise{ //构造方法 constructor(executor){ //添加属性 //[[PromiseState]] 双括号表明内部属性 this.PromiseState = 'pending' this.PromiseResult = null; this.callbacks = [] //保存实例对象的this const _this = this //resolve函数 f
promise源码库
weixin_34051201的博客
03-02 169
先直接上源码吧。 if(!window.Promise) { function Promise(fn) { var self=this; this.status = 'pending'; this.thenCache = []; this.count = 0 ...
Promise/Bluebird源码
weixin_30781775的博客
07-14 160
本作品采用知识共享署名 4.0 国际许可协议进行许可。转载联系作者并保留声明头部与原文链接https://luzeshu.com/blog/bluebirdsource 本博客同步在http://www.cnblogs.com/papertree/p/7163870.html 时隔一年，把之前结尾还有一部分未完成的博客完成。版本2.9。具体忘了哪个revision number。不过原理差不多。...
Promise 简单源码
通俗易懂
04-11 355
Promise简单源码 目录Promise简单源码Promise方法分析Promise方法Promise源码 Promise方法 一个简单的Promise方法执行过程 const promise = new Promise(function(resolved, rejusted){ setTimeout(function(){ if(true){ r...
JS手写Promise源码
最新发布
12-19
为什么要手写Promise？1、深入理解Promise的工作原理：手写Promise可以帮助我们更深入地理解Promise的工作原理和内部机制。通过手动实现Promise的核心功能，如异步调用、状态管理和回调处理，我们可以更好地理解...
手写Promise源码
10-28
手动实现Promise源码，实现了Promise核心函数/resolve/reject/race/all/finally希望可以帮助到大家，路漫漫其修远兮,吾将上下而求索,
promise模块
08-14
在源码层面，Promise的实现通常包括一个状态机、任务队列和微任务调度等核心概念。状态机确保了Promise状态的不可变性，任务队列用于存放异步操作的回调，而微任务调度（如JavaScript的Event Loop中的Promise Job ...
es6-promise
04-02
es6-promise.auto.js ,可用于微信小程序开发，小程序里需要
promise详解
03-09
关键词：Promise，resolve，reject，Prepending，Resolve，Reject，then，catch，all，race
手写Promise函数源码完整版
覃福安的博客
06-19 203
const PENDING = 'PENDING', FULFILLED = 'FULFILLED', REJECTED = 'REJECTED'; function resolvePromise(promise2,x,resolve,reject){ // 如果promise2和x引用的是同一个对象,以typeError为理由拒绝 if(promise2===x){ reject(new TypeError('类型错误！')); } //是
Promise源码解析-步步为营皆可及
weixin_34072637的博客
03-31 144
本文根据promise的用法, 带您一步一步的了解promise的源码内幕; 本文采用要点、使用、源码分析的思路,步步为营,一点一点的剖析Promise的神秘世界; 本文Promise源码部分采用es5语法 Promise定义 promise是异步解决方案; 字面意思是"承诺",即未来某个时刻才能得到结果; 从语法上来说,它是一个对象,从它可以获取异步操作的消息; 基本用法 - 构造函数 ...
手写promise大致源码
weixin_45429409的博客
11-27 337
【代码】手写promise大概源码。 原生js大致实现promise源码
promise详解一（解读Promise对象）
岂曰无衣
12-15 1762
为什么需要Promise？ Javascript是一门单线程语言，早期我们解决异步场景时，大部分情况都是通过回调函数来进行。 例如，在浏览器中发送ajax请求，就是常见的异步场景。发送请求后，一段时间服务端相应之后我们才能拿到结果，如果我们希望在异步结束之后执行某个操作，就只能通过回调函数这样的方式进行操作。 var dynamicFunc = function(cb){ setTimeout(function(){ cb(); }, 1000); } dynamicFunc(function()
最详细的Promise相关源码实现
SherrybabyOne的博客
08-12 690
写这篇文章的目的是解剖Promise源码，起因也是最近秋招被问到了让手写Promise，另外在网上看到的Promise源码或多或少有些小问题，也就是没有完全遵循Promise/A+规范。 代码会完全使用ES6语法，主要分以下几个模块： 整体分析（为代码书写铺路） 实现初版（构造函数大致功能亿完善） 支持异步和链式调用（完善then方法） 实现catch方法 实现Promise.resolve() 实现Promise.reject() 实现Promise.all() 实现Promise.race() 一、
这次彻底搞懂 Promise(手写源码多注释篇)
油墨香^-^的博客
08-15 248
promise 是 js 里面非常重要的一部分，搞懂了 promise 才能更好的去理解 async,await 和 generator。但是往往很多时候就是不理解 promise 的机制，所以这次通过一步步实现一个 promise 来加深自己的印象，提高自己的思维。...
从零开始一个完整的promise(附源码)
wang-ccnu的博客
07-01 202
实现过程详细步骤，文档传送门 从零实现promise(一) 从零实现promise(二) 从零实现promise(三) 源码： // 先定义三个状态变量 const PENDING = 'pending' const REJECTED = 'rejected' const FULFILLED = 'fulfilled' class MyPromise { state = PENDING value = '' // 向后传的value值 callbacks = [] // 回调
Promise实现原理（附源码）
shentibeitaokong的博客
09-26 6673
写的是真的好，详细，特此转载保存一下。  本篇文章主要在于探究 Promise 的实现原理，带领大家一步一步实现一个 Promise , 不对其用法做说明，如果读者还对Promise的用法不了解，可以查看阮一峰老师的ES6 Promise教程。 接下来，带你一步一步实现一个 Promise 1. Promise 基本结构 new Promise((resolve, reject) =...
Promise源码解析
Lotus的博客
03-18 3834
/** * 手写promise 1.promise 就是一个类 在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行 2.promise 中有三种状态 分别为 成功fulfilled 失败rejected 等待pendeng pending -> fulfilled pending -> rejected 一旦状态确定就不可更改 3.resolve和reject函数是用来更改状态的 resolve: fulfilled reject: .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值