es6 Promise对象、Promise方法实现

ES6 Promise对象
	
	1、优点:
		1、代表未来某个将要发生的事件(通常是一个异步操作)
		2、可以将异步操作以同步的流畅表达出来,避免了层层嵌套的回调函数即回调地狱
		3、避免异步回调不好写异常处理的问题
		4、方便阅读
		

	2、Promise对象三个状态,即实例上内置的[[PromiseState]]属性的值,该属性无法操作,状态只能改变一次
		pending:初始状态,即不调用resolve/reject或抛出错误的状态
		fullfilled/resolved:成功状态
		rejected:失败状态,reject或抛出异常
		
		只有当pending状态改变了,才会触发.then回调
	
  	3、Promise内置属性:内置属性无法操作,即不能读和写
  		[[PromiseState]]  promise对象的三个状态
  		[[PromiseResult]] 传递给resolve/reject方法的值
  		
  	
  	4、Promise内部函数同步调用,执行器函数异步调用.then中的方法参数
	  	new Promise((resolve,reject)=>{
	  		console.log() 同步调用
	  		resolve()	执行器可以在异步函数中调用
	  	})
		
	5、使用Promise:
		创建:
			创建Promise对象
			 let promise =new Promise((resolve,reject)=>{
			 	若成功使用resolve(数据);
			 	若失败使用reject(数据)/throw 异常
			 })
		 
		
		接收:
			Promise实例对象.then((resolve传递的数据)=>{
				成功回调
			},(reject传递的数据)=>{
				失败回调
			}).finally(()=>{
				最后总会执行的回调
			})
		
			其中:失败回调有两种接受方式:
				方式一:.then的第二个函数参数,会覆盖掉.catch
				方式二:.catch()
				.catch只能接收之前返回Promise对象的reject失败回调或throw Error的异常
					p.catch()直接调用
					p.then(()=>{}).catch((err)=>{...}); 
					返回一个Promise对象:返回结果同.then相同
						
			
	6、多个分开的.then方法,只有在Promise状态pending改变后才会执行,否则不执行
		p.then(()=>{})
		p.then(()=>{})
		
	7、链式.then调用
		.then会返回一个Promise对象,[[PromiseResult]]的值即为返回的普通值/Promise调用了resolve/reject的结果,若执行器函数还未执行,则[[PromiseState]]为pending
		
		第一个.then,若无返回值,且resolve执行器已执行,则返回状态为fullfilled,返回结果为undefined
			未执行前未pending,执行后会修改状态
		
		.then中正常返回结果(在执行器函数执行后)
			若返回Promise实例对象,返回状态和值和该Promise实例对象相同
			若返回普通值,返回状态为fullfilled,结果为普通值结果
			若无返回值,返回状态为fullfilled,结果为undefined
		
		.then非正常返回结果:
			若没有返回值,[[PromiseResult]]的值为undefined
			若抛出异常,则[[PromiseState]]为rejected,[[PromiseResult]]为出错信息
		
		异常穿透:
			可以在最后调用.catch()或.then(()=>{},(err)=>{}),捕捉之前链式调用中的失败回调(reject()/throw)
			
		中断链式调用:
			返回一个pending状态的promise对象,return new Promise(()=>{})
			原因:当返回pending状态的promise对象,.then也会返回一个pending状态的promise对象,状态没有改变,后面的.then方法不会执行

	8、Promise方法:
		Promise.resolve(value):
			传入非Promise类型:返回一个fullfilled状态的promise对象
			传递的Promise实例对象:返回的promise状态和传入的promise状态相同,即决定了用.then还是.catch解析
			
			用处:可用来封装返回一个promise对象
			
		Promise.reject(value):
			传入非Promise类型:返回一个rejected状态的promise对象
			传递的Promise实例对象:会返回rejected状态的promise对象,值就为传递的promise对象
			
		Promise.all():
			Promise.all返回值:
				会等到前一个promise执行完,才执行后面的promise
				若传入的所有promise都resolve,则返回一个fullfilled状态、值为所有resolve结果组成的数组的Promise对象
				若有一个promise是reject或throw,则返回一个rejected状态、值为失败reject结果/抛出错误的Promise对象
			
			Prmosise.all([Promise对象,...]).then(res=>{
				返回结果是集合中所有resolve的结果或return返回结果集合
			}).catch(err=>{
				当有一个reject执行就会抛出错误,错误信息为第一个reject执行的内容
			})
			
			例子:
				当添加async后,map会自动返回Promise对象,最外层await的结果是内部每个Promise执行完毕返回的结果
		        let res=await Promise.all(filePath.map(async (path) => {	
		          const data = await readFile(path);
		          return data;     
		        }))
		        
		Promise.allSettled():
			返回一个在所有给定的promise都已经fulfilled或rejected后或者普通值(不能函数返回)的promise
			Promise.allSettled([...]).then((res)=>{
				res为一个对象数组,每个对象表示对应的promise结果,{status: "fulfilled等状态", value: 结果}
			})
		
			例子:
				const promise1 = Promise.resolve(3);
				const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
				const promises = [promise1, promise2,2];
				
				Promise.allSettled(promises).
				  then((results) => results.forEach((result) => console.log(result))).
				  catch(err => { console.log(err) });
				  
		Promise.any():
			所有给定的promise中只要其中的一个promise成功,就返回那个已经成功的promise,都reject则返回失败的 promise 和AggregateError
			Promise.any([promise,或普通值]).then((value) => {
				
			}).catch(err=>...)
		
		Promise.race():
			返回给定的promise中第一个resolve或reject的promise
			
			Promise.race([promise1, promise2]).then((value) => {
			  console.log(value);
			}).catch(err=>console.log(err))
		
		Promise.finally()
			不管成功还是失败都将执行

代码示例:
Promise.all

Promise.all = function (promises) {
    //promises是一个promise的数组
    return new Promise(function (resolve, reject) {
        let arr = []; //arr是最终返回值的结果
        let i = 0; // 表示成功了多少次
        function processData(index, data) {
            arr[index] = data;
            if (++i === promises.length) {
                resolve(arr);
            }
        }
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(function (data) {
                processData(i, data)
            }, reject)
        }
    })
}

Promise.race

Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (var i = 0; i < promises.length; i++) {
            promises[i].then(resolve,reject)
        }
    })
}

Promise.resolve

Promise.resolve = function(value){
    return new Promise((resolve,reject) => resolve(value);
}

Promise.reject

Promise.reject = function(reason){
    return new Promise((resolve,reject) => reject(reason));
}

Promise.defer

Promise.defer = Promise.deferred = function () {
    let dfd = {};
    dfd.promise = new Promise( (resolve, reject) =>  {
        dfd.resolve = resolve;
        dfd.reject = reject;
    });
    return dfd
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6(ECMAScript 2015)引入了Promise对象,它是一种异步编程的解决方案。当一个异步操作完成后,Promise对象会返回一个代表操作结果的值,而不是像传统方式那样使用回调函数。 Promise对象的then方法用于指定操作成功和失败时的回调函数。而且可以将then方法连续使用,形成链式调用。当一个Promise对象的then方法返回另一个Promise对象时,后续的then方法都会等待该Promise对象的状态改变。 链式调用的好处在于减少了回调函数嵌套的层数,提高了代码的可读性和可维护性。通过then方法的链式调用,可以构建一串异步操作,使得代码逻辑更加清晰。 例如: ``` function getJSON(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(JSON.parse(xhr.responseText)); } else { reject(new Error('Unable to fetch data')); } } }; xhr.send(); }); } getJSON('/data/user.json') .then(user => { return getJSON(`/data/profile/${user.id}.json`); }) .then(profile => { console.log(profile); }) .catch(error => { console.error(error); }); ``` 上述代码展示了一个获取用户信息和个人资料的异步操作,其中getJSON函数返回一个Promise对象。通过then方法的链式调用,可以先获取用户信息,然后再获取个人资料。如果有任何一个异步操作失败,则会进入catch回调函数。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值