手动实现一个Promise

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

2019.08.06 更新
ES6中实现的Promise是按照 Promise/A+ 规范，我们可以知道 Promise 是有三个状态的：PEDING，REJECTED，FULFILLED
所以我们需要保证如下：

  1. promise 中只能接收一个函数作为参数
  2. 初始状态是 PENDING，且只能变化成 REJECTED / FULFILLED 二者之一，且只能变化一次。
const isFunction = variable => typeof variable === 'function'
// 声明三个状态常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'

class MyPromise {
  	constructor(handle) {
 	   // 如果不是函数，直接抛出异常
       if (!isFunction(handle)) {
         throw new Error('MyPromise must accept a function as a parameter')
       }
       // 添加状态
       this._status = PENDING
       this._value = undefined

       try {
		  handle(this._resolve.bind(this), this._reject.bind(this))
	   }
   }

	_resolve(val) {
		if (this._status !== PENDING) return

		this._status = FULFILLED
		this._value = val
	}
}

接下来我们要实现 then 方法。该方法接收两个参数：

promise.then(onFulfilled, onRejected)

参数可选

onFulfilled 和 onRejected 都是可选参数，如果 onFulfilled 或 onRejected 不是函数，其会被忽略

多次调用

支持 chain 调用，那 then 需要返回一个 promise

来看几个例子，帮助理解。

如果 onFulfilled 或者 onReject 返回值不是 Promise ，那么其返回值是会直接向下传递的。

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve()
  }, 1000)
})
promise2 = promise1.then(res => {
  // 返回一个普通值
  return '这里返回一个普通值'
})
promise2.then(res => {
  console.log(res) //1秒后打印出：这里返回一个普通值
})

如果 onFulfilled 或者 onReject 返回值是一个 Promise ，那么其返回值是会直接向下传递的。

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve()
  }, 1000)
})
promise2 = promise1.then(res => {
  // 返回一个Promise对象
  return new Promise((resolve, reject) => {
    setTimeout(() => {
     resolve('这里返回一个Promise')
    }, 2000)
  })
})
promise2.then(res => {
  console.log(res) //3秒后打印出：这里返回一个Promise
})

如果 onFulfilled 或者 onRejected 抛出一个异常 e ，则 promise2 必须变为失败（Rejected），并返回失败的值 e，例如：

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 1000)
})
promise2 = promise1.then(res => {
  throw new Error('这里抛出一个异常e')
})
promise2.then(res => {
  console.log(res)
}, err => {
  console.log(err) //1秒后打印出：这里抛出一个异常e
})

如果 onRejected 不是函数且 promise1 状态为失败（Rejected），promise2必须变为失败（Rejected） 并返回 promise1 失败的值，例如：

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('fail')
  }, 1000)
})
promise2 = promise1.then(res => res, '这里的onRejected本来是一个函数，但现在不是')
promise2.then(res => {
  console.log(res)
}, err => {
  console.log(err)  // 1秒后打印出：fail
})

根据以上的规则，我们来实现 then 方法，首先需要在构造函数中增加两个队列。

constructor (handle) {
  if (!isFunction(handle)) {
    throw new Error('MyPromise must accept a function as a parameter')
  }
  // 添加状态
  this._status = PENDING
  // 添加状态
  this._value = undefined
  // 添加成功回调函数队列
  this._fulfilledQueues = []
  // 添加失败回调函数队列
  this._rejectedQueues = []
  // 执行handle
  try {
    handle(this._resolve.bind(this), this._reject.bind(this)) 
  } catch (err) {
    this._reject(err)
  }
}

为了支持链式调用，我们的 then 方法是需要返回 promise 的

// 添加then方法
then (onFulfilled, onRejected) {
  const { _value, _status } = this
 
  // 返回一个新的Promise对象
  return new MyPromise((onFulfilledNext, onRejectedNext) => {
  	 this._fulfilledQueues.push(onFulfilled)
  	 this._rejectedQueues.push(onRejected)
  })
}

这里我们还需要对 onFulfilled 和 onRejected 进行进一步处理。

  • 如果不是一个函数，就把其忽略
  • 如果是一个Promise，就需要等待其状态改变后再执行下一个状态。否则就把其返回值当作下一个状态的参数传递下去
// 添加then方法
then (onFulfilled, onRejected) {
  const { _value, _status } = this
 
  // 返回一个新的Promise对象
  return new MyPromise((onFulfilledNext, onRejectedNext) => {
	 let fulfilled = value => {
		try {
			if (!isFunction(onFulfilled)) {
				onFulfilledNext(value)
			} else {
				let res = onFulfilled(value)
				if (res instanceof MyPromise) {
					res.then(onFulfilledNext, onRejectedNext)
				} else {
					onFulfilledNext(res)
				}
			}
		} catch(err) {
			onRejectedNext(err)
		}
	 }
	 
	let rejected = error => {
		try {
			if (!isFunction(onFulfilled)) {
				onRejectedNext(value)
			} else {
				let res = onRejectedNext(value)
				if (res instanceof MyPromise) {
					res.then(onFulfilledNext, onRejectedNext)
				} else {
					onFulfilledNext(res)
				}
			}
		} catch(err) {
			onRejectedNext(err)
		}
	 }

  	 this._fulfilledQueues.push(fulfilled)
  	 this._rejectedQueues.push(rejected)
  })
}

最后我们在 _resolve 和 _reject 中一次执行队列中的函数即可。

// 添加resovle时执行的函数
_resolve (val) {
  if (this._status !== PENDING) return
  // 依次执行成功队列中的函数，并清空队列
  const run = () => {
    this._status = FULFILLED
    this._value = val
    let cb;
    while (cb = this._fulfilledQueues.shift()) {
      cb(val)
    }
  }
  // 为了支持同步的Promise，这里采用异步调用
  setTimeout(() => run(), 0)
}
// 添加reject时执行的函数
_reject (err) { 
  if (this._status !== PENDING) return
  // 依次执行失败队列中的函数，并清空队列
  const run = () => {
    this._status = REJECTED
    this._value = err
    let cb;
    while (cb = this._rejectedQueues.shift()) {
      cb(err)
    }
  }
  // 为了支持同步的Promise，这里采用异步调用
  setTimeout(run, 0)
}

另外我们还需要考虑到一种情况，即如果 resolve 的参数是一个 promise。

 // 添加resovle时执行的函数
  _resolve (val) {
    const run = () => {
      if (this._status !== PENDING) return
      // 依次执行成功队列中的函数，并清空队列
      const runFulfilled = (value) => {
        let cb;
        while (cb = this._fulfilledQueues.shift()) {
          cb(value)
        }
      }
      // 依次执行失败队列中的函数，并清空队列
      const runRejected = (error) => {
        let cb;
        while (cb = this._rejectedQueues.shift()) {
          cb(error)
        }
      }
      /* 如果resolve的参数为Promise对象，则必须等待该Promise对象状态改变后,
        当前Promsie的状态才会改变，且状态取决于参数Promsie对象的状态
      */
      if (val instanceof MyPromise) {
        val.then(value => {
          this._value = value
          this._status = FULFILLED
          runFulfilled(value)
        }, err => {
          this._value = err
          this._status = REJECTED
          runRejected(err)
        })
      } else {
        this._value = val
        this._status = FULFILLED
        runFulfilled(val)
      }
    }
    // 为了支持同步的Promise，这里采用异步调用
    setTimeout(run, 0)
  }

这样一个Promise就基本实现了，现在我们来加一些其它的方法

catch 方法

// 添加catch方法
catch (onRejected) {
  return this.then(undefined, onRejected)
}

静态 resolve 方法

// 添加静态resolve方法
static resolve (value) {
  // 如果参数是MyPromise实例，直接返回这个实例
  if (value instanceof MyPromise) return value
  return new MyPromise(resolve => resolve(value))
}

静态 reject 方法

// 添加静态reject方法
static reject (value) {
  return new MyPromise((resolve ,reject) => reject(value))
}

静态 all 方法

// 添加静态all方法
static all (list) {
  return new MyPromise((resolve, reject) => {
    /**
     * 返回值的集合
     */
    let values = []
    let count = 0
    for (let [i, p] of list.entries()) {
      // 数组参数如果不是MyPromise实例，先调用MyPromise.resolve
      this.resolve(p).then(res => {
        values[i] = res
        count++
        // 所有状态都变成fulfilled时返回的MyPromise状态就变成fulfilled
        if (count === list.length) resolve(values)
      }, err => {
        // 有一个被rejected时返回的MyPromise状态就变成rejected
        reject(err)
      })
    }
  })
}

静态 race 方法

// 添加静态race方法
static race (list) {
  return new MyPromise((resolve, reject) => {
    for (let p of list) {
      // 只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
      this.resolve(p).then(res => {
        resolve(res)
      }, err => {
        reject(err)
      })
    }
  })
}

finally 方法

finally (cb) {
  return this.then(
    value  => MyPromise.resolve(cb()).then(() => value),
    reason => MyPromise.resolve(cb()).then(() => { throw reason })
  );
}
qq_35534823
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
promise
蓝色杯子和猫
06-05 314
如何自己实现一个promise promise简单描述一下，如何在外部进行resolve()
超详细！手把手带你实现一个完整的Promise
Coding home - 漂流瓶jz
10-04 623
本文首先介绍了JavaScript中异步编程的几种方式，再对Promise进行了简单介绍。然后从创建类开始，一步一步实现一个完整的Promise。我们实现的Promise不仅可以通过Promises/A+规范测试，并且提供了与ECMAScript同样的实用函数。
一文破解Promise难题：Promise机制深入剖析与实例
最新发布
JINGWHALE
05-26 318
Promise 是 JavaScript 中用于处理异步操作的一种重要机制。Promise 用于解决 JavaScript 中异步操作的复杂性，通过状态管理、链式调用、错误处理等功能，实现代码的清晰、有序与可维护，避免回调地狱，提升异步编程的效率与体验。
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
weixin_44759938的博客
06-27 120
resolve参数是一个函数。当调用resolve函数时，它会将当前Promise对象的状态从pending变为fulfilled,并将传入的参数作为新Promise对象的值。如果传入的参数不是一个Promise对象，那么它会被立即执行，并作为新Promise对象的值。当调用reject函数时，它会将当前Promise对象的状态从pending变为rejected,并将传入的参数作为新Promise对象的值。如果传入的参数不是一个Promise对象，那么它会被立即执行，并作为新Promise对象的值。
手动实现Promise方法（原理）
04-23 1176
我们在使用Promise，为了解决异步操作，去实现同步代码的作用 平时开发时候，我们很多时候，需要等待接口返回后，去做一些处理，或者借用返回值，再调用，，如果用传统的方法，我们容易陷入回调地狱的问题，代码的可读性也不是很好 现在我们来看下Promise的原理，是如何实现的 1、Promise是一个类，执行这个类的时候，需要传入一个执行器进去，执行器立即执行 class myPromise{ // executor执行器 constructor(executor){
js代码-手动实现一个 Promise
07-16
在JavaScript的世界里，Promise是异步编程的一种解决方案，它提供了比传统的回调函数更优雅的方式来处理复杂的异步操作。...理解并手动实现Promise不仅有助于提高对异步编程的理解，还能提升解决实际问题的能力。
算法基础：手动实现promiseAll
01-21
算法基础：手动实现promiseAll
promise详解，手动实现以及上万字笔记.rar
08-16
本资源包含了一份手动实现Promise的源码（Promise.js）和一份详细的Promise详解笔记（文档.md）。以下是Promise的基础知识及深入解析： 1. **Promise状态**： - `pending`：初始状态，既没有完成也没有被拒绝。 -...
js代码-手动实现Promise的Code
07-15
手动实现Promise，我们需要创建一个构造函数，接收一个执行器函数作为参数。执行器函数有两个参数，分别是resolve和reject，它们是用于改变Promise状态的函数。 ```javascript function MyPromise(executor) { // ...
promise简单实现
weixin_42619992的博客
04-21 1918
1、最简单的实现 promise有三种状态，分别是Pedding、Fulfilled、Rejected。 Pedding promise对象实例创建时的初始状态 Fulfilled可以理解为成功的状态 Rejected可以理解为失败的状态 2、构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是function类型的参数。分别是resolve和reject 3、Promise上还有then方法，then方法就是用来指定Promise对象的状态
Javascript-Promise原理
03-06
Promise 对象有三种状态： Pending – Promise对象的初始状态，等到任务的完成或者被拒绝；Resolved – 任务执行完成并且成功的状态；Rejected – 任务执行完成并且失败的状态； Promise的状态只可能从Pending状态转到Resolved状态或者Rejected状态，而且不能逆向转换，同时Resolved状态和Rejected状态也不能相互转换； Promise对象必须实现then方法，then是promise规范的核心，而且then方法也必须返回一个Promise对象，同一个Promise对象可以注册多个then方法，并且回调的执行顺序跟它们的注册顺序一致； then方法接受两个回调函数，它们分别为：成功时的回调和失败时的回调；并且它们分别在：Promise由Pending状态转换到Resolved状态时被调用和在Promise由Pending状态转换到Rejected状态时被调用。
从零开始实现一个promise（原理详解）
qq_41999592的博客
10-21 251
promise简单使用 console.log(1); new Promise((resolve, reject) => { console.log(2); resolve("aaa"); }) .then((value) => { console.log(4, value); return "bbb"; }) .then((value) => { console.log(5, value); return "ccc"; }); co
JavaScript手写Promise
weixin_45808183的博客
01-28 884
const PROMISE_STATUS_PENDING = 'pending' const PROMISE_STATUS_FULFILLED = 'fulfilled' const PROMISE_STATUS_REJECTED = 'rejected' // 工具函数 function execFunctionWithCatchError(execFn, value, resolve, reject) { try { const result = execFn(value) res
js中promise原理及手动基本实现_V1
哈根达斯~
06-06 232
这几天面试过程，有个面试官突然跟我抠上了promise的实现原理，虽然有所准备，但是没能清晰地说出其中的原理，所以有点遗憾，但是事已至此，也只能默默去，因此有了这篇抠promise原理的文章 ...
js手动实现promise
mht1829的博客
09-04 2650
手撕Promise
js中promise原理及手动基本实现_V2
哈根达斯~
06-06 146
前言 上一章中已经讲完了promise最基本实现的原理，这一章将在其基础上进一步扩展，以满足更多的使用场景。 过程
手动实现完整的Promise
kkm486622296的博客
03-02 233
声明：本文是学习珠峰培训视频，模仿实现的对象Promise，通过了 promises-aplus-tests测试，文章最下面有截图。 constPENDING='pending';//初始态 constFULFILLED='fulFilled';//成功态 constREJECTED='rejected';//失败态 functionPromise(e...
关于Promise的使用，及手动实现 promise
code_fanjiayu的博客
06-25 300
简单的理下Promise使用场景， Promise.resolve(); Promise.reject(); Promise.all(); Promise.all() 使用注意事项 1.all 中接收一个可迭代的参数， 如数组和字符串 2.如果该参数为空 则Promise.all同步返回一个resolve； 3.all中如果接收的参数是promise对象，则当有一个promise...
手写一个Promise.all
09-15
好的，下面是手动实现的 `Promise.all` 的代码： ```javascript function myPromiseAll(promises) { return new Promise((resolve, reject) => { let results = []; let counter = 0; function ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值