ES6 承诺 promise

- 日理万妓 2022-11-27 06:49 185阅读 0赞

## 承诺 promise ##

### 关键字： ###

1.  promise 承诺
2.  resolve 兑现
3.  reject 拒绝
4.  then 然后
5.  catch 捕捉失败

### 案例： ###

2秒后说：你好，能加个微信吗？  
3秒后说：我好喜欢你  
5秒后说：邀请你百年后葬进我家祖坟

var p = new Promise(function(resolve,reject){ 
    	//承诺内容
    	var num = Math.random();
    	if(num>0.5){ 
    		//resolve 成功返回的值
    		resolve ("买一套大房子");
    	}else { 
    		// reject 失败 返回的值
    		reject ("等等再买吧！")
    	}
    	})
    	p.then(function(res){ 
    		//兑现承诺
    		console.log(res);
    	})
    	.catch(function(err){ 
    	//不兑现
    	console.log(err)
    	})

### 回调函数 ###

1.  普通回调  
    缺点：个数多了会臃肿，嵌套太多,可读性差

function say(str,time,callback){ 
    	//参数str：要说的话 time：延时时间 callback 回调
    		setTimeout(()=>{ 
    			console.log(str);
    				if(callback){ callback()}
    			},time)
    		}
    		say("你好，能加个微信吗？",2000,function(){ 
    			say("我好喜欢你",3000,function(){ 
    				say("邀请你百年后葬进我家祖坟",5000)
    		})
    	})

1.  promise 承诺方式  
    用promise 可解决回调层级太深等的问题，扁平化（在一层）  
    下一个then是上一个return的结果

function say(str,time){ 
    	return new Promise((resolve,reject)=>{ 
    		setTimeout(()=>{ 
    			resolve (str)
    		},time)
    	})
    }
    say("你好，能加个微信吗？",2000)
    .then(res=>{ 
    	console.log(res);
    	return say("我好喜欢你",3000)
    })
    .then(res=>{ 
    	console.log(res);
    	return say("邀请你百年后葬进我家祖坟",5000)
    })
    .then(res=>{ 
    	console.log(res);  //下一个then是上一个return的结果
    })

### Promise.race 按顺序加载 ###

<script type="text/javascript">
    	var arr = [
    	"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340",
    	"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340",
    	"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
    	]
    	//同时加载三张图片，哪张图片先加载出来用哪张 
    	function loadImg(url){ 
    		return new Promise((resolve,reject)=>{ 
    			var img = document.createElement("img");
    			//创建一个图片节点
    			img.src=url;
    			img.width=300;
    			img.onload = function(){ 
    				//图片加载事件
    				resolve(img);//返回图片
    			}
    			img.onerror=function(e){ 
    				reject(e)  //失败 e失败事件对象
    			}
    		})
    	}
    	// Promise.race 比赛 哪个promise最先resolve 返回哪个
    	Promise.race([
    		loadImg(arr[0]),
    		loadImg(arr[1]),
    		loadImg(arr[2])
    	])
    	.then(res=>{ 
    		document.body.append(res);
    		//将接受的res渲染到页面
    	})
    	.catch(err=>{ console.log(err)})
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，185人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6 Promise

Promise基本上是面试面试必问点之一。为什么能在面试这么高频的呢？什么是Promise 它的出现是为了更好地解决JavaScript中异步编程的问题，传统的异步编

不念不忘少年蓝@/ 2023年07月18日 09:53/ 0 赞/ 21 阅读

相关 ES6 Promise

Promise promise对象从语法上来看呢，是一个构造函数，用来生成Promise实例，用来封装异步操作，并提供成功后或失败后的结果所谓Promise，简单说

怼烎@/ 2022年12月01日 15:58/ 0 赞/ 239 阅读

相关 ES6 承诺 promise

承诺 promise 关键字： 1. promise 承诺 2. resolve 兑现 3. reject 拒绝 4. then 然后 5. catch

- 日理万妓/ 2022年11月27日 06:49/ 0 赞/ 186 阅读

相关 ES6 Promise

promise是一种解决异步函数传递数据问题回调函数解决---->回调地狱 .Promise Promise是一个对象，使用时需要创建这个对象 new P

r囧r小猫/ 2022年11月24日 14:11/ 0 赞/ 220 阅读

相关 es6 Promise

传统实现异步操作就是采用回调函数，回调函数方式本身没有什么问题，但是在多重回调层层嵌套的情况下，那么代码的可阅读性就会出现问题。 Promise对象是一个新的异步操作解决方

曾经终败给现在/ 2022年06月09日 14:45/ 0 赞/ 276 阅读

相关 ES6-Promise

Promise what? 在我看来Promise就相当于一个承诺容器，将所要执行的事件存贮在promise容器中。 Promise在ES6中被统一规范，由浏览

深碍√TFBOYSˉ_/ 2022年06月08日 11:08/ 0 赞/ 503 阅读

相关 ES6-Promise

1. Promise的基础 (1)js的异步操作: a. ajax请求 b. 浏览器事件 c. 定时，setTime setInteval

ゞ浴缸里的玫瑰/ 2022年05月15日 07:52/ 0 赞/ 314 阅读

相关 ES6 promise

作用：就是解决异步回调问题的 let promise = new Promise(function(resolve, reject){ })

小灰灰/ 2022年04月13日 06:14/ 0 赞/ 620 阅读

相关 ES6 —— Promise

不使用 ES6 Promise 嵌套两个 setTimeout 回调函数 setTimeout(function(){ console.log('hel

深碍√TFBOYSˉ_/ 2021年12月21日 17:19/ 0 赞/ 367 阅读

相关 ES6 Promise

[https://blog.csdn.net/shan1991fei/article/details/78966297][https_blog.csdn.net_shan19

偏执的太偏执、/ 2021年12月08日 17:13/ 0 赞/ 370 阅读