手把手教你实现一个promise

最新推荐文章于 2024-05-26 10:15:15 发布
最新推荐文章于 2024-05-26 10:15:15 发布
阅读量406 收藏
点赞数
分类专栏： promise 文章标签： javascript node.js es6 vue.js reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36836989/article/details/110526605
版权

文章目录

前言

网上看了很多关于promise的源码讲解，都是上来直接讲的源码实现，本文将带你通过分析promise的使用方法来了解promise的具体实现

先看一段代码

const p = new Promise((resolve, reject) => {
  resolve('resolve')
  setTimeout(() => {
    reject('reject')
  })
})

p.then(res => {
  console.log('ok: ' + res)
}, err => {
  console.log('err: ' + err)
})

// ok: resolve
上面代码运行结果为ok: resolve，得知一旦调用了resolve之后reject则无法调用，反之也是一样的

得出结论：
1 promise是一个类
2 内部有三个状态，状态一旦发生改变则无法再变为其他状态
3 实例化这个类需要传递两个方法，分别是：resolve和reject 并且这两个参数也是方法，resolve的作用就是
4 实例方法then方法接受两个回调函数函数作为参数分别是成功的和失败的回调函数，当调用resolve时会触发then的成功回调函数，当调用reject时会触发then的失败回调函数。

// 上边说到内部有三种状态 假定三种状态为： pendding fulfilled rejected
// pendding：最初的状态
// fulfilled： 当调用resolve方法后由pendding =》fulfilled
// rejected： 当调用reject方法后由pendding =》rejected
// 且状态一旦发生改变后就无法再进行改变

// 三种状态常量
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise{
	// 接受一个立即执行的方法
	constructor(fn) {
		fn(this._resolve, this._rejected)
	}
	// 状态 初始为 pendding
	_status = PENDING
	// 该方法将状态改为fulfilled
	_resolve = () => {
		// 判断当前状态是否为 pending 是： 改变状态为 FULFILLED 否：不做任何操作
	    if (this._status !== PENDING) return
	    this._status = FULFILLED
	}
	// 该方法将状态改为rejected
	_rejected = () => {
		// 判断当前状态是否为 pending 是： 改变状态为 REJECTED 否：不做任何操作
	    if (this._status !== PENDING) return
	    this._status = REJECTED
	}
}

进入主题

then

通过第一段代码得知then是实例方法且接受两个回调函数函数作为参数分别是成功的和失败的回调函数，当调用resolve时会触发then的成功回调函数，当调用reject时会触发then的失败回调函数。

class MyPromise{
	...
	...
	// 保存调用resolve 和 rejected时的参数 在调用then方法时需要将对应信息作为参数回传
	_resolveInfo = undefined
	_rejectedInfo = undefined
	// 保存then方法中的两个回调函数 在异步处理完成后（状态改变后）调用相应函数 then方法可被同一实例多次调用所以为数组
	 _resolveCallBack = []
	 _rejectedCallBack = []
	 
	// 该方法将状态改为fulfilled
	_resolve = () => {
		// 判断当前状态是否为 pending 是： 改变状态为 FULFILLED 否：不做任何操作
	    if (this._status !== PENDING) return
	    this._status = FULFILLED
	    // 保存成功信息
	    this._resolveInfo = res
	    // 调用成功回调函数并将失败信息作为参数 _resolveCallBack
	    while (this._resolveCallBack.length) this._resolveCallBack.shift()(this._resolveInfo)
	}
	// 该方法将状态改为rejected
	_rejected = () => {
		// 判断当前状态是否为 pending 是： 改变状态为 REJECTED 否：不做任何操作
	    if (this._status !== PENDING) return
	    this._status = REJECTED
	    // 保存失败信息
	    this._rejectedInfo = err
	    // 调用失败回调函数并将失败信息作为参数 _rejectedCallBack
	    while (this._rejectedCallBack.length) this._rejectedCallBack.shift()(this._rejectedInfo)
	}
	// then 两个参数 分别为 成功的回调和失败的回调
	then(fulfilledCallBack, rejectedCallBack) {
	    // 如果状态为 fulfilled 调用成功回调并传递成功信息
	    if (this._status === FULFILLED) {
	      fulfilledCallBack(this._resolveInfo)
	    // 如果状态为 rejected 调用失败回调并传递失败信息
	    } else if (this._status === REJECTED) {
	      rejectedCallBack(this._rejectedInfo)
	    // 如果状态为 pending 则保存回调 待状态改变后触发相应回调 (异步)
	    } else {
	      // 这里是异步情况 将 回调函数保存到callback数组中 并在状态改变时调用（_resolve，_rejected 函数中调用）
	      this._resolveCallBack.push(fulfilledCallBack)
	      this._rejectedCallBack.push(rejectedCallBack)
	    }
	}
}

then的链式调用

接下来我们来实现then的链式调用 我们再来看一个例子 
const res = new Promise((resolve, reject) => {
  resolve('成功1')
})

const res1 = new Promise((resolve, reject) => {
  resolve('成功2')
})

res.then(res => {
  // 这里我们返回一个普通类型变量
  return 'a'
}).then(res => {
  // 链式调用这里的res是上一个then的返回如果不返回则为undefined
  console.log(res)
})

res.then(res => {
  // 这里我们将一个promise对象返回过去
  return res1
}).then(res => {
  // 这里的res接受的是上一个then返回的promise对象的计算结果
  console.log(res)
})

res.then(undefined, err => {
  // 这里根本没有走到 因为这是失败的回调 而创建promise实例的时候内部调用的是成功的方法 所以这个失败函数中的代码是无效的
  console.log(err)
  return 'b'
}).then(res => {
  // 链式传递 因为上一个then方法的成功回调并不存在， 参数会作为这次函数的形参
  console.log(res, 1)
})

res.then(res => {
  // 当前成功回调中抛出一个错误 这个错误会在下一个then函数的失败回调中捕获
  throw new Error('err1')
}).then(undefined, err => {
  console.log(err.message, 2)
})


输出结果为：
// a
// 成功1 1
// err1 2
// 成功2
通过上边的案例我们得出结论： 1 then 方法可以链式调用 2 then 方法中会返回一个Promise实例 且 回调方法中的返回值或者抛出的失败会作为下一个then方法中相应回调的形参 3 then 回调方法中可以返回普通类型和Promise实例 
class MyPromise {
  ...
  ...
  // then 两个参数 分别为 成功的回调和失败的回调
  then(fulfilledCallBack, rejectedCallBack) {
    // 判断是存在回调函数
    fulfilledCallBack = fulfilledCallBack ? fulfilledCallBack : val => val
    rejectedCallBack = rejectedCallBack ? rejectedCallBack : err => err
    let promise1 = new MyPromise((resolve, reject) => {
        // 如果状态为 fulfilled 调用成功回调并传递成功信息
        // queueMicrotask 会创建一个异步任务 这里用异步任务的原因是 MyPromise 还没有实例化完成 所以得不到 promise1 这里为什么要用 queueMicrotask 而不是 setTimeout 因为promise是微任务 setTimeout是宏任务 queueMicrotask会创建一个微任务
        if (this._status === FULFILLED) {
          queueMicrotask(() => {
            try {
              const res = fulfilledCallBack(this._resolveInfo) 
              this._isPromise(promise1, res, resolve, reject)
            } catch (error) {
              reject(error)
            }
          })
        // 如果状态为 rejected 调用失败回调并传递失败信息
        } else if (this._status === REJECTED) {
          queueMicrotask(() => {
            try {
              const res = rejectedCallBack(this._rejectedInfo)
              this._isPromise(promise1, res, resolve, reject)
            } catch (error) {
              reject(error)         
            }
          })
        // 如果状态为 pending 则保存回调 待状态改变后触发相应回调 (异步)
        } else {
          this._resolveCallBack.push((res) => {
            queueMicrotask(() => {
              try {
                const e = fulfilledCallBack(res)
                this._isPromise(promise1, e, resolve, reject)
              } catch (error) {
                reject(error)
              }
            })
          })
          this._rejectedCallBack.push((err) => {
            queueMicrotask(() => {
              try {
                const e = rejectedCallBack(err)
                this._isPromise(promise1, e, resolve, reject)
              } catch (error) {
                console.log(error)
              }
            })
          })
        }
    })
    return promise1
  }
  // 判断传递过来的是 promise 还是 普通类型  如果为promise类型需要判断是否和当前实例是否相等
  _isPromise = (promise1, res, resolve, reject) => {
    if (promise1 === res) return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    if (res instanceof MyPromise) {
      res.then(resolve, reject)
    } else {
      resolve(res)
    }
  }
}
至此为止我们就实现了then方法 下边我们实现catch方法

catch

先来看一段事例代码 
const res = new Promise((resolve, reject) => {
  reject('err')
})

// catch方法可以链式调用也可以直接使用 它会捕获整条链上的错误
res.then((res => {})).then().catch(err => {
  console.log(err)
})

打印结果为：
// err
得出结论： catch方法和then方法非常像，就是没有成功回调的then方法 
class MyPromise {
  ...
  ...
  // catch
  catch = (callback) => {
    return this.then(undefined, callback)
  }
}
最后附上完整版代码 
// 三种状态常量
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  // 接受一个立即执行的方法
  constructor(fn) {
    try {
      fn(this._resolve, this._rejected)
    } catch (error) {
      this._rejected(error)
    }
  }

  // catch
  catch = (callback) => {
    // 链式调用需要return
    return this.then(undefined, callback)
  }

  // 状态 初始为 pendding
  _status = PENDING

  // 保存调用resolve 和 rejected时的参数 在调用then方法时需要将对应信息作为参数回传
  _resolveInfo = undefined
  _rejectedInfo = undefined

  // 保存then方法中的两个回调函数 在异步处理完成后（状态改变后）调用相应函数 then方法可被同一实例多次调用 为数组
  _resolveCallBack = []
  _rejectedCallBack = []

  // 定义两个改变状态的方法 需要使用箭头函数 不然会改变this的指向
  _resolve = res => {
    // 判断当前状态是否为 pending 是： 改变状态为 FULFILLED 否：不做任何操作
    if (this._status !== PENDING) return
    this._status = FULFILLED
    // 保存成功信息
    this._resolveInfo = res
    // 调用回调
    while (this._resolveCallBack.length) this._resolveCallBack.shift()(this._resolveInfo)
  }
  _rejected = err => {
    // 判断当前状态是否为 pending 是： 改变状态为 REJECTED 否：不做任何操作
    if (this._status !== PENDING) return
    this._status = REJECTED
    // 保存失败信息
    this._rejectedInfo = err
    // 调用回调
    while (this._rejectedCallBack.length) this._rejectedCallBack.shift()(this._rejectedInfo)
  }

  // then 两个参数 分别为 成功的回调和失败的回调
  then(fulfilledCallBack, rejectedCallBack) {
    // 判断是存在回调函数
    fulfilledCallBack = fulfilledCallBack ? fulfilledCallBack : val => val
    rejectedCallBack = rejectedCallBack ? rejectedCallBack : err => {throw err}
    let promise1 = new MyPromise((resolve, reject) => {
      // 如果状态为 fulfilled 调用成功回调并传递成功信息
      if (this._status === FULFILLED) {
        queueMicrotask(() => {
          try {
            const res = fulfilledCallBack(this._resolveInfo) 
            this._isPromise(promise1, res, resolve, reject)
          } catch (error) {
            reject(error)
          }
        })
      // 如果状态为 rejected 调用失败回调并传递失败信息
      } else if (this._status === REJECTED) {
        queueMicrotask(() => {
          try {
            const res = rejectedCallBack(this._rejectedInfo)
            this._isPromise(promise1, res, resolve, reject)
          } catch (error) {
            reject(error)         
          }
        })
      // 如果状态为 pending 则保存回调 待状态改变后触发相应回调 (异步)
      } else {
        this._resolveCallBack.push((res) => {
          queueMicrotask(() => {
            try {
              const e = fulfilledCallBack(res)
              this._isPromise(promise1, e, resolve, reject)
            } catch (error) {
              reject(error)
            }
          })
        })
        this._rejectedCallBack.push((err) => {
          queueMicrotask(() => {
            try {
              const e = rejectedCallBack(err)
              this._isPromise(promise1, e, resolve, reject)
            } catch (error) {
              console.log(error)
            }
          })
        })
      }
    })
    return promise1
  }

  // 判断传递过来的是 promise 还是 普通类型  如果为promise类型需要判断是否和当前实例是否相等
  _isPromise = (promise1, res, resolve, reject) => {
    if (promise1 === res) return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    if (res instanceof MyPromise) {
      res.then(resolve, reject)
    } else {
      resolve(res)
    }
  }
}
到此本文中promise功能已经实现了，基本上可以直接使用了，当然promise还有静态方法，比如：Promise.all Promise.resolve 等。
程序人生_li
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Promise的简单介绍与使用
sen_03的博客
10-28 310
一.Promise的介绍 1.Promise的由来 （1）Promise是es6提出来的一个非常重要的一个语法 （2）Promise是一种‘处理异步’的解决方案 用“同步编写代码”的方式“处理异步”的一种解决方案，解决回调地狱的问题 2.Promise的简单介绍 （1）Promise是一个构造函数 （2）() 参数里是一个回调函数 resolve : fn =>成功操作 调用resolve reject : fn => 失败操作 调用 reject （3） Promise里面放一个异步操作
Promise原理详解及实现方式
19年的墨先生的博客
09-11 8330
在异步编程中，许多操作都会放在回调函数（callback）中，有时候需要拿到上一个异步操作的返回值再做第二次请求 比如： asyncOperation(data => { // 处理 `data` anotherAsync(data2 => { // 处理 `data2` yetAnotherAsync(() => { // 完成 }) }) }) 上面代码中，每增加一个异步请求，就会多添加一层回调函数的嵌套，过多的回调
Promise 实现原理
热门推荐
weixin_43299180的博客
02-21 2万+
文章目录一、Promise 介绍二、promise 源码实现 一、Promise 介绍 定义 Promise 是异步编程的一种解决方法，比传统的回调函数和事件更合理；它是由社区提出和实现经由 ES6 将其写进语言标准，并在原生提供了 Promise 对象； Promise 可以理解是一个容器，里面保存着某个将来才会结束的事件（异步操作）的结果；从语法上说，Promise 是一个对象通过它可以获取异步操作的消息；Promise 提供了统一的 API ，各种异步操作都可以用同样的方法进行处理。 特点 Pr
一文破解Promise难题：Promise机制深入剖析与实例
最新发布
JINGWHALE
05-26 313
Promise 是 JavaScript 中用于处理异步操作的一种重要机制。Promise 用于解决 JavaScript 中异步操作的复杂性，通过状态管理、链式调用、错误处理等功能，实现代码的清晰、有序与可维护，避免回调地狱，提升异步编程的效率与体验。
Promise的实现
霜叶的博客
03-01 222
实现Promise
Promise（手动实现）
风起
09-25 805
文章目录1. `Promise`1.1 `Promise` 的 基本使用1.1.1 创建1.1.2 静态方法1.1.3` then`、`catch`1.1.4 `finally`1.2 `Promise`实现1.2.1 确定成员函数和成员变量1.2.2 准备工作1.2.3 定义状态1.2.4 定义`MP`的结构1.2.5 实现`MpPrototype`1.2.5.1 实现`resolve`和`reject`函数1.2.5.2 实现`then`1.2.5.3 进一步完善`resolve`和`reject`函数
Promise
庸人方自扰，自在就好
05-23 850
ECMAscript 6 原生提供了 Promise 对象。 Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。 Promise 对象有以下两个特点: 1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态： pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英
手把手教你写一个微信小程序
02-24
现在微信小程序越来越火，...先创建一个空文件夹然后打开开发者工具，新建项目，按需选择启动模板，这里选择的是建立普通快速启动模板点击确定后，你的小程序就创建好啦。默认的项目结构关于默认项目结构里的介绍，我
手把手教你实现 Promise的使用方法
12-17
前言 很多 JavaScript 的初学者都曾感受过被回调地狱支配的恐惧，直至掌握了 Promise 语法才算解脱。虽然很多语言都早已内置...今天我们就一步一步来实现一个 Promise，如果你还没有用过 Promise，建议先熟悉一下 Promi
222-手把手带你写一个MiniSpring
05-06
"222-手把手带你写一个MiniSpring"这个主题，旨在通过实践教学的方式，让你了解并掌握Spring框架的基本原理，从而能够自己动手实现一个简化版的Spring框架——MiniSpring。 【描述】"222-手把手带你写一个Mini...
C-Sharp-Promise：用于C＃的Promises库，用于管理异步操作
02-06
C尖锐的承诺 C＃的承诺库，用于管理异步操作。 受JavaScript承诺启发，但略有不同。 由使用，用于在Unity3d上构建严肃的游戏和模拟。 如果您对使用诺言进行游戏开发和Unity感兴趣，请参阅。 最近更新 v3.0（2018年2月15日） 最后经过修改，使其工作方式与JavaScript中的一致。 增加了对在诺言中报告进度的支持。 用强名签名的程序集。 错误会引发自定义异常类型，而不是通用异常类型。 修改了然后的重载没有意义。 v2.0（2017年12月4日） 然后，在处理异常而不是终止之后，现在运行在Catch之后链接的函数 捕捉可以返回，将被传递到下一个然
Promise超简易实现
疯狂紫萧
08-07 1760
有时候就需要一个简单的Promise撑场面，能用就行。 ——真不行的时候咱再使用正事的呗。实现的方法1.new Promise(fn),创建一个新的Promise对象并传入第一个执行方法。 2.resolve。成功的执行方法 3.reject。失败的执行方法 4.catch。失败的捕获。 5.then。链式调用下一步。原理内部使用一个数组报错需要执行的所有方法，使用then来添加新的方法。
C# Async Await Promise
yaoyutian的博客
06-16 798
...
promise的创建
weixin_40945354的博客
08-10 445
const promise = new Promise(function(resolve, reject){ setTimeout(function(){ try { let c = 6 / 2 ; resolve(c); console.log(c) }catch(ex) { reject(ex); } }, 1000)
怎样new一个promise?
weixin_46101501的博客
07-14 6094
创建一个Promise对象 构造函数原型：new Promise(function(resolve, reject) { … } ) 构造函数用一个函数作为参数，该函数有两个参数，两个参数均是回调函数，由JS引擎提供，你不用自己部署了。第一个参数resolve，当异步操作成功时会调用，它有一个参数用于传递异步操作成功的结果。第二个参数reject，当异步操作失败时会调用，它有一个参数用于传递异步操作失败的信息。例如： var myPromise = new Promise(function(resolve,
使用 ES6 简单实现一个promise
雾里看花叹朦胧
05-02 589
Git源码： https://github.com/slhuang520/study/tree/master/web/es6/test/src/promise 整体结构图如下： MyPromise .js // require("babel-register"); //自动编译 // import "core-js"; //引入 polyfill // import "regenerator-r...
什么是Promise，Promise的三种状态
wfly blog
09-25 1万+
什么是Promise对象： Js中进行异步编程的新的解决方案（传统的解决方案——回调函数和事件），用于表示一个异步操作的最终完成 (或失败), 及其结果值.。 语法上：promise是一个构造函数 简单来说，promise对象用来封装一个异步操作并可以获取其结果 语法： new Promise(function (resolve, reject) { ... } /* e...
简单易懂的Promise基础教程（小白入门）
潮汐未见潮落的博客
06-13 5840
promise的入门基础知识，简单了解promise的三种状态
Promise的实现原理
初漾的博客
10-15 698
以下是promise的简单实现var Deferred = function () { this.promise = new Promise(); };var Promise = function () { this.queue = []; this.isPromise = true; //判断是否返回了一个promise对象 }Promise.prototype.then = func
手把手教你写一个ios app
07-28
以下是一步一步教你如何编写一个iOS应用的简要指南： 1. 了解基本知识： 在开始编写iOS应用之前，你需要了解一些基本的编程概念和iOS开发环境。学习Objective-C或Swift编程语言、熟悉Xcode集成开发环境以及掌握基本...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值