Promise笔记promise重写

最新推荐文章于 2024-05-17 18:30:38 发布
最新推荐文章于 2024-05-17 18:30:38 发布
阅读量451 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30258495/article/details/126456666
版权

异步操作

  • 封装异步操作手动
let p = new Promise((resolve,reject)=>{
	//异步操作
	//成功调resolve()
	//失败调reject()
})
//第一个callback就是resolve()，第二个是reject()
p.then(callback,callback)
  • 封装异步操作util.promisify()
    • nodejs内置的模块util，方法.promisify()可以将一个需要封装的函数自动封装并返回一个promise对象
      • 导入
      • 使用
//导入util模块
const util = require('util')

const fs = require('fs')
//封装fs的readFile方法
let p = util.promisify(fs.readFile)
//此时的p就相当于fs.readFile函数，只不过他是一个promise函数
p('./test.text').then(
	value => {
		console.log(value.toString());
	},
	err => {
		console.log(err.message);
	}
)

util.promisify()参数为一个错误优先的回调函数，即(err,data)=>{}

promise的状态

  • pending未决定的

  • resolved/fullfilled成功

  • rejected失败

  • 只能由pending变为成功或者失败

  • 一个对象只能改变一次状态一般成功的结果是value，失败的结果是reason

promise的值

  • PromiseResult属性上存在成功或失败的结果

then

  • 他的返回值也是一个promise对象
  • 返回状态由执行回调的返回值决定
    • 如果执行的是成功/失败回调❗没写错
      • 不return，返回成功状态promise对象，值为undefined
      • 抛出错误，返回失败状态的promise对象，值为抛出的错误
      • return 非promise对象值，返回成功状态promise对象，值为return的非promise对象值
      • return promise对象，返回的promise对象的状态和值与return的promise对象的状态和值保持一致
  • 当被promise对象调用时，如果是成功状态就调用then的第一个回调并传成功的值

不管执行哪个回调都是这4点

cath

  • 只能执行失败的回调

Promise.resolve(option)

  • 是构造函数Promise的方法。不是实例的方法
  • 如果option是非promise对象，则resolve返回成功状态的promise对象，且值为option
  • 如果option是promise对象，则resolve返回状态和值与option的状态和值一致

Promise.reject(option)

  • 是构造函数Promise的方法。不是实例的方法
  • 只能返回失败状态的promise对象，而返回的promise对象的值为option

Promise.all([p1,p2,p3])

  • 是构造函数Promise的方法。不是实例的方法
  • 参数中所有的promise对象的状态成功才会返回成功状态的promise对象，且值为所有成功的promise对象的值所组成的数组
  • 参数中如果有失败状态的promise对象，那就会返回失败状态的promise对象,且值为第一个失败状态的promise对象的值
let p1 = Promise.resolve('p1')
let p2 = Promise.resolve('p2')
let p3 = Promise.reject('p3')
let p4 = Promise.reject('p4')
console.log(Promise.all([p1, p2, p3, p4]));
/*
Promise {<pending>}
	[[Prototype]]: Promise
	[[PromiseState]]: "rejected"
	[[PromiseResult]]: "p3"
*/

let p1 = Promise.resolve('p1')
let p2 = Promise.resolve('p2')
console.log(Promise.all([p1, p2]));
/*
Promise {<pending>}
	[[Prototype]]: Promise
	[[PromiseState]]: "resolved"
	[[PromiseResult]]: "Array[p1,p2]"
*/

Promise.race([p1,p2,p3])

  • 是构造函数Promise的方法。不是实例的方法
  • 传入的promise对象谁先改变状态，那返回的promise对象的状态和值与器保持一致

问题

  • 改变promise状态

    • .resolve()
    • .reject()
    • throw抛出错误

  • 只要promise状态改变，为他所定义多有回调都会执行（就是多个then都会执行）

  • 异常穿透

    • 链式调用then只需要最后调一个catch错误回调即可，他会在出现失败状态promise对象后调用

  • 中断链式调用

    • 返回一个pending状态的promise对象new Promise(()=>{})

重写Promise构造函数

  • 第一种
//把他们包在一个定时器里主要是为了让实例和Promise的方法都是异步的，当然也可以给他的方法里面的细节去加定时器（推荐），还有其他方法百度或者源码
setTimeout(() => {
	//声明
	function Promise (executor) {
		//保存this
		let _this = this
		//声明状态和值
		this.promiseState = 'pending'
		this.promiseResult = null
		//声明存储异步then的回调的数组
		this.callback = []
		//改变状态为成功的函数
		function resolve (data) {
			//判断状态是否已经更改，防止改第二次
			if (_this.promiseState !== 'pending') return
			//设置状态和值
			_this.promiseState = 'fulfilled'
			_this.promiseResult = data
			//执行then失败的回调（异步）
			_this.callback.forEach(item => {
				item.onResolved(data)
			})
		}
		//改变状态为失败的函数
		function reject (data) {
			//判断状态是否已经更改，防止改第二次
			if (_this.promiseState !== 'pending') return
			//设置状态和值
			_this.promiseState = 'rejected'
			_this.promiseResult = data
			//执行then失败的回调（异步）
			_this.callback.forEach(item => {
				item.onRejected(data)
			})
		}

		//抛出异常处理
		try {
			//同步调用执行器函数
			executor(resolve, reject)
		} catch (data) {
			reject(data)
		}
	}

	//添加then
	Promise.prototype.then = function (onResolved, onRejected) {
		let _this = this
		//判断传递的参数是不是函数，若不是，给默认函数
		if (typeof onResolved !== 'function') {
			onResolved = value => value
		}
		if (typeof onRejected !== 'function') {
			onRejected = reason => { throw reason }
		}
		//返回一个Promise对象
		return new Promise((resolve, reject) => {
			//封装重复代码
			function callback (type) {
				try {
					//判断回调返回类型
					let result = type(_this.promiseResult)
					if (result instanceof Promise) {
						result.then(
							(value) => {
								resolve(value)
							},
							(reason) => {
								reject(reason)
							}
						)
					} else {
						resolve(result)
					}
				} catch (error) {
					reject(error)
				}
			}
			//判断状态，决定执行成功或失败回调
			if (_this.promiseState === 'fulfilled') {
				callback(onResolved)
			}
			if (_this.promiseState === 'rejected') {
				callback(onRejected)
			}
			//如果是异步，那就要把then的回调保存起来，等状态改变时再调用对应回调
			if (_this.promiseState === 'pending') {
				_this.callback.push({
					onResolved: () => {
						callback(onResolved)
					},
					onRejected: () => {
						callback(onRejected)
					}
				})
			}
		})
	}

	//添加catch
	Promise.prototype.catch = function (onRejected) {
		return this.then(undefined, onRejected)
	}

	//添加resolve方法
	Promise.resolve = function (value) {
		return new Promise((resolve, reject) => {
			if (value instanceof Promise) {
				value.then(
					value => {
						resolve(value)
					},
					reason => {
						reject(reason)
					})
			} else {
				resolve(value)
			}
		})
	}

	//添加reject方法
	Promise.reject = function (reason) {
		return new Promise((resolve, reject) => {
			reject(reason)
		})
	}

	//添加all方法
	Promise.all = function (promises) {
		return new Promise((resolve, reject) => {
			let count = 0
			let arr = []
			promises.forEach((item, index) => {
				item.then(
					value => {
						count++,
							arr[index] = value
						if (index === promises.length - 1) {
							resolve(arr)
						}
					},
					reason => {
						reject(reason)
					}
				)
			});
		})
	}

	//添加race方法
	Promise.race = function (promises) {
		return new Promise((resolve, reject) => {
			promises.forEach(item => {
				item.then(
					value => {
						resolve(value)
					},
					reason => {
						reject(reason)
					}
				)
			});
		})
	}
})
  • 第二种类封装
setTimeout(()=>{
	class Promise {
		constructor(executor) {
			//保存this
			let _this = this
			//声明状态和值
			this.promiseState = 'pending'
			this.promiseResult = null
			//声明存储异步then的回调的数组
			this.callback = []
			//改变状态为成功的函数
			function resolve (data) {
				//判断状态是否已经更改，防止改第二次
				if (_this.promiseState !== 'pending') return
				//设置状态和值
				_this.promiseState = 'fulfilled'
				_this.promiseResult = data
				//执行then失败的回调（异步）
				_this.callback.forEach(item => {
					item.onResolved(data)
				})
			}
			//改变状态为失败的函数
			function reject (data) {
				//判断状态是否已经更改，防止改第二次
				if (_this.promiseState !== 'pending') return
				//设置状态和值
				_this.promiseState = 'rejected'
				_this.promiseResult = data
				//执行then失败的回调（异步）
				_this.callback.forEach(item => {
					item.onRejected(data)
				})
			}
	
			//抛出异常处理
			try {
				//同步调用执行器函数
				executor(resolve, reject)
			} catch (data) {
				reject(data)
			}
		}
		//添加then
		then (onResolved, onRejected) {
			let _this = this
			//判断传递的参数是不是函数，若不是，给默认函数
			if (typeof onResolved !== 'function') {
				onResolved = value => value
			}
			if (typeof onRejected !== 'function') {
				onRejected = reason => { throw reason }
			}
			//返回一个Promise对象
			return new Promise((resolve, reject) => {
				//封装重复代码
				function callback (type) {
					try {
						//判断回调返回类型
						let result = type(_this.promiseResult)
						if (result instanceof Promise) {
							result.then(
								(value) => {
									resolve(value)
								},
								(reason) => {
									reject(reason)
								}
							)
						} else {
							resolve(result)
						}
					} catch (error) {
						reject(error)
					}
				}
				//判断状态，决定执行成功或失败回调
				if (_this.promiseState === 'fulfilled') {
					callback(onResolved)
				}
				if (_this.promiseState === 'rejected') {
					callback(onRejected)
				}
				//如果是异步，那就要把then的回调保存起来，等状态改变时再调用对应回调
				if (_this.promiseState === 'pending') {
					_this.callback.push({
						onResolved: () => {
							callback(onResolved)
						},
						onRejected: () => {
							callback(onRejected)
						}
					})
				}
			})
		}
		//添加catch
		catch (onRejected) {
			return this.then(undefined, onRejected)
		}
		//添加resolve方法
		static resolve (value) {
			return new Promise((resolve, reject) => {
				if (value instanceof Promise) {
					value.then(
						value => {
							resolve(value)
						},
						reason => {
							reject(reason)
						})
				} else {
					resolve(value)
				}
			})
		}
		//添加reject方法
		static reject (reason) {
			return new Promise((resolve, reject) => {
				reject(reason)
			})
		}
		//添加all方法
		static all (promises) {
			return new Promise((resolve, reject) => {
				let count = 0
				let arr = []
				promises.forEach((item, index) => {
					item.then(
						value => {
							count++,
								arr[index] = value
							if (index === promises.length - 1) {
								resolve(arr)
							}
						},
						reason => {
							reject(reason)
						}
					)
				});
			})
		}
		//添加race方法
		static race (promises) {
			return new Promise((resolve, reject) => {
				promises.forEach(item => {
					item.then(
						value => {
							resolve(value)
						},
						reason => {
							reject(reason)
						}
					)
				});
			})
		}
	}
})

async函数

  • 定义函数async function main(){}
    • 返回值为promise对象
    • 不return，返回成功状态 promise 对象，值为undefined
    • 抛出错误，返回失败状态的 promise 对象，值为抛出的错误
    • return 非promise对象值，返回成功状态promise对象，值为return的非promise对象值
    • return promise对象，返回的 promise 对象的状态和值与 return 的 promise 对象
  • await关键字只能在async函数中
    • await promise对象
      • promise对象是成功状态，返回成功promise对象的值
      • promise对象是失败状态，抛出错误，错误值也是失败promise对象的值
    • await 其他
      • 返回其他
        - async与await的应用
const fs = require('fs')
const util = require('util')
//封装函数为promise对象
const myReadFile = util.promisify(fs.readFile)

async function main () {
	let data1 = await myReadFile('./1.txt')
	let data2 = await myReadFile('./2.txt')
	let data3 = await myReadFile('./3.txt')
	console.log(data1 + data2 + data3);
}
main()
代码不高兴
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于Promise部分原理重写
qq_44891829的博客
12-14 892
Promise手写
Promise 学习笔记
01-08
1. Promise 基本结构 2. Promise 状态和值 3. Promise 的 then 方法 4. Promise基本实现 5. Promise零碎知识 Promise 用法 ：MDN Promise Promise 底层实现 ：Promise实现原理（附源码） （本文学习并参考的一篇...
ES6-22【Promise源码重写】
小管打天下的博客
05-11 279
一、Promise源码实现
Promise中的rejected方法讲解
最新发布
勤修方可得道成仙
05-17 368
当然，当我们谈到Promise对象的rejected状态时，我们实际上是在讨论Promise对象在异步操作失败或发生错误时所处的状态。当Promise被拒绝（rejected）时，它会传递一个原因（通常是一个错误对象），这个原因可以被后续的.catch()方法捕获并处理。以下是关于Promise对象rejected。
重写promise 写一个类似于promise的方法
致我逝去的青春的博客
03-05 542
1.重写promise 写一个类似于promise的方法 // promise 内置类 //重写promise 写一个类似于promise的方法 class MyPromise{ constructor(excutor){//当new Mypromise constructor执行l //this -》Promise 的实例 ...
重写Promise.all()方法
weixin_43430676的博客
10-21 462
Promise.myall = function(arr){ let n = 0;//声明一个计算器，当全部执行成功后再resolve() let resolveValue = [];//存放结果的数组 return new Promise(function(resolve,reject){ //对promise对象的数据进行循环 for(let i = 0;i<arr.length;i++){ //如果执行成功后，将结果添加到数组中
node.js学习笔记--HTTP之Promise重写小爬虫
sriting的博客
03-20 436
注：此博客是在学习进击Node.js基础（一）这门课程时的学习笔记，感谢Scott老师的课程。 一、使用Promise处理异步、嵌套 1. 用传统的回调来按顺序执行小球动画 &lt;!doctype&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Promise animation&lt;/title&gt; &lt;style&...
Promise笔记发布 (1).txt
07-31
Promise笔记发布
自己重写Promise
08-12
研究过js异步及其解决方案的时候，接触到了Promise。一开始只是会用，然后渐渐的感觉这个小 东西的设计及其巧妙。就想到花时间自己实现一个
javascript异步编程代码书写规范Promise学习笔记
10-24
`.when()`方法是另一个重要的工具，它可以接受多个Promise对象并返回一个新的Promise，当所有传入的Promise都完成或有一个失败时，新Promise的状态会相应改变。这对于处理多个并发的异步操作特别有用，比如并发的...
js代码-Promise 笔记
07-16
js代码-Promise 笔记
Promise的运行原理以及重写Promise内置类
mister、奎
07-19 950
1.为什么用？ 假设我们需要发三次请求A,B,C,B请求需要用到A请求回来的数据，C需要用到B请求回来的数据，怎么发送？ $.ajax({ url:'jsonA.json', success(data) { $.ajax({ url:'jsonB.json', success(data) { ...
ES6笔记 22.Promise重写
syhdqdzs的博客
10-25 115
ES6笔记 22
重构 Promise 及其方法
weixin_49592687的博客
05-09 281
重构Promise 重构 `then()` 、`resolve()`、`reject()`、`all()`和`race()`
javascript 实现Promise.prototype.catch
shiyidemingzij的博客
07-08 1032
实现Promise.prototype.catch catch方法的实现非常简单，它的作用用于捕获一段Promise程序的异常，通常我们会将它放到Promise调用链的最下方。之所以说它非常简单因为这个作用已经被then方法实现了，所以我们只需要对then方法进行下包装即可： MyPromise.prototype.catch = function (onRejected) { return this.then(undefined, onRejected); }; 如果您没有理解上面的实现，可以返回到
可重复执行resolve和reject的Promise
u012182853的博客
07-03 1516
import { asap } from "./asap"; /** * 可重复执行resolve和reject的Promise */ export class MyPromise<T> { private values: any[] = []; private reasons: any[] = []; /** * 0 padding 1 resolve 2 reject */ private status: 0|1|2 = 0; private onfu.
（基础）Promise类方法reject()使用
热门推荐
次顶级的博客
12-18 1万+
可直接返回失败的Promise对象
Promise的使用详解
酒客的博客
12-23 1488
Promise内容详解–知识点整理 异步任务的处理 ​ 在ES6出来之后，有很多关于Promise的讲解、文章，也有很多经典的书籍讲解Promise。虽然等你学会Promise之后，会觉得Promise不过如此，但是在初次接触的时候都会觉得这个东西不好理解； 那么这里我从一个实际的例子来作为切入点： 我们调用一个函数，这个函数中发送网络请求（我们可以用定时器来模拟）； 如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去； 如果发送网络请求失败了，那么告知调用者发送失败，并且告知错误信息
Promise构造函数的Promise.reject()方法
陈开心的博客
11-09 7489
Promise.reject(reason)方法返回一个带有拒绝原因（reason参数）的Promise对象。 语法 Promise.reject(reason); 参数：reason 表示Promise被拒绝的原因。 返回值：一个被拒绝的 Promise对象。 静态函数Promise.reject返回一个被拒绝的Promise对象。通过使用 Error的实例 获取错误原因（reason）对调试...
尚硅谷promise笔记
09-10
尚硅谷的Promise笔记涵盖了Promise的基本结构、状态和值、then方法、基本实现以及零碎知识。在笔记中，还介绍了Promise的用法和底层实现原理，包括中断promise链的方式和catch方法的使用。 总结起来，尚硅谷的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值