最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 深度解析Promise(三)

    正文概述 掘金(小雯的老公)   2021-02-06   358

    静态方法Promise.rosolve()

    用过这个方法的应该都知道:

    • 这个方法的作用是将传入的参数转化成promise对象
    • 如果参数是一个 Promise 实例,直接返回这个 Promise 实例
    • 如果参数是一个 具有then方法的 thenable 对象,例如以下的对象,Promise.resolve() 方法会将这个对象转为 Promise 对象,然后立即执行 thenable 对象 then 方法
    const thenable = {
    	then: function(resolve,reject){
    		resolve('ok')
    	}
    }
    
    • 传入的参数不是对象,或者不具有上面 then 方法的对象,那么 Promise.resolve() 方法返回个新的 Promise 实例,状态为已成功,并把参数传递出去
    • 不带有任何参数,Promise.resolve() 方法允许在调用时不带有参数而直接返回个新的 Promise 实例,状态为已成功

    基于以上用法,我们来实现一下这个方法

    Promise.resolve = function(param){
    	// 如果传入的参数已经是个Promise对象了,直接返回这个对象
    	if(param instanceof Promise){
    		return param;
    	}
    	return new Promise((resolve,reject)=>{
    		//如果参数是一个 具有then方法的 thenable 对象 , 执行then方法
    		if(param && Object.prototype.toString.call(param) === '[object Object]' && typeof param.then === 'function' ){
    			param.then(resolve,reject);
    		}else{
    			resolve(param);  // 传入的参数不是对象,或者不具有上面 then 方法的对象, 返回一个promise实例,状态为成功
    		}
    	})
    }
    

    静态方法Promise.reject()

    同样回顾一下Promise.reject()的用法:

    • 返回一个新的 Promise 实例,状态为已失败,并把参数作为失败的原因传递出去

    这个比较容易实现了:

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

    静态方法Promise.all()

    Promise.all()的用法是:

    Promise.all([p1,p2,p3]).then(res=>{console.log(res)})
    
    • 把多个 Promise 实例包装成一个新的 Promise 实例
    • 其中 p1、p2、p3 不是 Promise 实例的,内部会通过 Promise.resolve() 将其转成 Promise 实例
    • promise 的状态由 p1、p2、p3 决定, 分成两种情况:

    1.只有 p1、p2、p3 的状态都变为已成功, promise的状态才会变为已成功 ,此 pl 、p2、 p3 的返回值组成一个数组,传递给 promise 的回调函数 2.只要 pl 、p2 、p3 中有一个的状态变为已失败,p 的状态就会变为已失败,此时 pl 、p2、 p3 中第一个状态变为已失败的返回值会传递给 promise的回调函数

    Promise.all = function(promiseArray){
    	return new Promise((resolve,reject)=>{
    		let result = [];
    		const handler = (i,v)=>{
    			result[i] = v;
    	        if(i + 1 === promisesArray.length){
    	          resolve(result);
    	        }
    		}
    	
    		for(let i = 0; i < promiseArray.length; i++){
    			let promise = promiseArray[i]
    			if(promise && promise.then && typeof promise.then === 'function'){
    				promise.then(v=>{
    					handler(i,v);
    				},res=>{
    					reject(err);
    				})
    			}else{
    				handler(i,promise);
    			}
    		}
    	})
    }
    

    静态方法Promise.race()

    Promise.race() 的用法:

    Promise.race([p1,p2,p3]).then(res=>{console.log(res)});
    
    • 把多个 Promise 实例包装成一个新的 Promise 实例
    • 其中 p1、p2、p3 不是 Promise 实例的,内部会通过 Promise.resolve() 将其转成 Promise 实例
    • promise 的状态由 p1、p2、p3 决定, 只要 pl、 p2、 p3 中有一个状态改变,promise 的状态马上就会对应改变,此时 pl 、p2、 p3 中第一个状态改变的返回值会传递给 promise的回调函数

    那么试着按照上面的用法来写一下:

    Promise.race = function(promiseArray){
    	return new Promise((resolve,reject)=>{
    		for(let i =0; i < promiseArray.length; i++){
    			let promise = promiseArray[i];
    			if(promise && promise.then && typeof promise.then === 'function'){
    				promise.then(v=>{
    					resolve(v);
    				},err=>{
    					reject(err);
    				})
    			}else{
    				resolve(promise);
    			}
    		}
    	])
    }
    

    至此,结合上两篇文章,我们通过对Promise的深度解析,已经全面了解了Promise的用法和其内部的实现原理,我们就可以在工作中更好更灵活的运用它了


    起源地下载网 » 深度解析Promise(三)

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元