ES6-Promise

最新推荐文章于 2023-07-09 15:37:38 发布
最新推荐文章于 2023-07-09 15:37:38 发布
阅读量495 收藏
点赞数
分类专栏： ES6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012054869/article/details/82109278
版权

1. Promise的基础

(1)js的异步操作:

     a. ajax请求

    b. 浏览器事件

     c. 定时，setTime setInteval

(2)异步无法避免产生回调函数

<script>
	//定时
	setTime(function(){
	})
	//事件
	add.addEventListener("click",function(){
	})
	//ajax
	xhr.addEventListener("readystartechange",function(){
	})
</script>

(3)回调地狱：回调函数嵌套回调函数

<script>
	//回调函数嵌套回调函数
	//现象
	var xhr = new XMLHttpRuquest();
	xhr.addEventListener("readystartechange",function(){
		xhr.responseText;//想要这个函数再次进行调用，则需要再写个函数

		var xhr = new XMLHttpRuquest();
		xhr.addEventListener("readystartechange",function(){

			//再次调用
			xhr.addEventListener("readystartechange",function(){
			})
		})
	})
	xhr.open();
	xhr.send();
</script>

（4）以上回调函数嵌套函数，代码可读性差，解决方法：Promise，

解决回调地狱

像同步操作那样去执行异步的操作

Promise的构造函数：必须接受一个函数作为参数，函数可以接收参数，例如例子中的resolve

<script>
    //Promise
    let p = new Promise(function(resolve){//接收参数
    	console.log("成功执行");
    	//调用参数，并没有输出进行中...需在下面进行调用
    	resolve("进行中...");//函数
    	console.log("执行完成");
    })
    console.log(p);//Promise { <state>: "fulfilled", <value>: "进行中..." }
    
    //resolve就相当于以下
    p.then(function(data){
    	console.log(data);//输出：进行中...
    })
</script>

2. Promise原理

（1）原理：

a. 一个Promise实例（对象）代表一个异步操作

<script>
    //Promise
    let p = new Promise(function(resolve,reject){//resolve，reject必须叫这个名称，不是自定义的
    	// 必须写异步操作
    	setTimeout(function(){
    		// 相当于函数的调用
    		resolve("执行");
    	},2000)
    })
   
   //相当于函数的声明
    p.then(function(res){
    	console.log(res);//2秒之后输出：执行
    })

</script>

b. promise通过状态去管理异步操作

pendding，进行中

<script>
    //Promise
    let p = new Promise(function(resolve,reject){//resolve，reject必须叫这个名称，不是自定义的
    	// 必须写异步操作
    	setTimeout(function(){
    		// 相当于函数的调用
    		resolve("执行");
    	},2000)
    })

    console.log(p);//Promise { <state>: "pending" }

</script>

fulfilled，已完成

<script> 
   //=============状态fulfilled已完成===========

      let p3 = new Promise(function(resolve,reject){//resolve，reject必须叫这个名称，不是自定义的
    	// 必须写异步操作
    	setTimeout(function(){
    		// 相当于函数的调用
    		resolve("执行fulfilled");
    	},2000)
    })
    setInterval(function(){
    	console.log(p3);
    },3000)//Promise { <state>: "fulfilled", <value>: "执行fulfilled" }

</script>

resolve()，函数执行之后

reject()，函数执行

rejected()，执行失败

<script>
    //=============状态rejected执行失败===========

      let p4 = new Promise(function(resolve,reject){//resolve，reject必须叫这个名称，不是自定义的
    	// 必须写异步操作
    	setTimeout(function(){
    		// 相当于函数的调用
    		// resolve("执行rejected");
    		reject();
    	},2000)
    })
    setInterval(function(){
    	console.log(p4);
    },3000)//Promise { <state>: "rejected" }
</script>

总结：以一例子看

<script>
	
    //Promise
    function timeout(){
    	let randNum = Math.random() * 2;
    	// let p = new Promise(function(resolve,reject){
    	return new Promise(function(resolve,reject){
    		setTimeout(function(){
    			if(randNum > 1){
    				resolve();

    			}else{
    				reject();
    			}

    		},randNum * 1000)
    	});
    }
    // 方法一：先使用setInterval实现

    let p = timeout();
    setInterval(function(){
    	console.log(p);
    },1000)//状态不确定

    //方法二：then()
    timeout.then(function(){
    	console.log("成功");

    },function(){
    	console.log("失败");
    })
   
</script>

3. Promise实例

问题：三个接口：电影排行榜、电影详情内容、电影详情人信息，查找排行榜第一的电影的导演的家乡在哪

解答一：传统

<body>
	<div id="main"></div>
</body>
<script>
	//排行榜
	let url01 = "http://api.unclealan.cn:4100/movie/top";

	// 电影详情
	let url02 = "http://api.unclealan.cn:4100/movie/subject/";

	// 电影人详情
	let url03 = "http://api.unclealan.cn:4100/movie/celebrity/";

	let message = "排行榜第一的电影是："

	// 1. 排行榜
	let xhr01 = new XMLHttpRequest();
	// 检测是否成功
	xhr01.onload = function(){
		// console.log(xhr01.responseText);//输出一些json字符串
		// 解析
		let resObj = JSON.parse(xhr01.responseText);
		let id = resObj.subjects[0].id;
		console.log(resObj.subjects[0].id);
		console.log(resObj.subjects[0].title);

		message += resObj.subjects[0].title+ "；";


		//2. 电影详情
		let xhr02 = new XMLHttpRequest();
		//检测是否成功
		xhr02.onload = function(){
			let resObj = JSON.parse(xhr02.responseText);
			// console.log(resObj);
			let id =resObj.directors[0].id;
			console.log(id);

			message += "导演是："+resObj.directors[0].name+ "；";


			//3. 电影详情人
			let xhr03 = new XMLHttpRequest();
			xhr03.onload = function(){

				let resObj = JSON.parse(xhr03.responseText);
				console.log(resObj.born_place);

				message += "老家是："+resObj.born_place;

				document.querySelector("#main").innerHTML = message;

				// let name = resObj.avatars.born_place;


			}
			xhr03.onerror = function(){
				console.log("请求电影详情人失败");
			}
			xhr03.open("GET",url03+id);//显示http://api.unclealan.cn:4100/subject/:id
			xhr03.send();


		}
		xhr02.onerror = function(){
			console.log("请求电影详情失败");
		}


		xhr02.open("GET",url02+id);//显示http://api.unclealan.cn:4100/subject/:id
		xhr02.send();


	}
	xhr01.onerror = function(){
		console.log("请求电影排行榜失败");
	}

	xhr01.open("GET",url01);
	xhr01.send();                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
</script>

 

解答二：Promise

<body>
   <div id="main"></div>
</body>
<script>
	//1. 排行榜
	let url01 = "http://api.unclealan.cn:4100/movie/top";

	//2. 电影详情
	let url02 = "http://api.unclealan.cn:4100/movie/subject/";

	//3. 电影人详情
	let url03 = "http://api.unclealan.cn:4100/movie/celebrity/";

	let message = "排行榜第一的电影是："

		// 1. 排行榜
		function getTopInfo(){
			return new Promise(function(resolve,reject){
				let xhr = new XMLHttpRequest();
				xhr.onload = function(){
					resolve(JSON.parse(xhr.responseText));

				}
				xhr.onerror = function(){
					reject("获取电影排行榜失败");
				}
				xhr.open("GET",url01);
				xhr.send();
			})
		}

		//2. 电影详情
		function getMovieInfo(id){
			return new Promise(function(resolve,reject){
				let xhr = new XMLHttpRequest();
				xhr.onload = function(){
					resolve(JSON.parse(xhr.responseText));
				}
				xhr.onerror = function(){
					reject("获取电影信息失败");
				}
				xhr.open("GET",url02+id);
				xhr.send();
				
			})
		}

		//3. 获取导演信息
		function getDirectorInfo(id){
			return new Promise(function(resolve,reject){
				let xhr = new XMLHttpRequest();
				xhr.onload = function(){
					resolve(JSON.parse(xhr.responseText));

				}
				xhr.onerror = function(){
					reject("获取导演信息失败");
				}
				xhr.open("GET",url03+id);
				xhr.send();

			})
		}


		// 1. 排行榜
		getTopInfo().then(function(res){
			console.log(res);
			message += res.subjects[0].title;
			return getMovieInfo(res.subjects[0].id);

		}
		//直接调用第二次异步请求
		// ,function(){
		// 	console.log("请求电影排行榜失败");
		// }
		)


		//2. 电影详情
		.then(function(res){
			message += "导演是："+res.directors[0].name;
			return getDirectorInfo(res.directors[0].id);

		})

		//3. 获取导演信息
		.then(function(res){
			message += "家乡是："+res.born_place;
			document.querySelector("#main").innerHTML = message;

		},function(msg){
			console.log(msg);//只写一个reject函数即可
		})
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
</script>

 

解答三：Promise更简洁

<body>
	<div id="main"></div>
</body>
<script>

	//1. 排行榜
	let url01 = "http://api.unclealan.cn:4100/movie/top";

	//2. 电影详情
	let url02 = "http://api.unclealan.cn:4100/movie/subject/";

	//3. 电影人详情
	let url03 = "http://api.unclealan.cn:4100/movie/celebrity/";

	let message = "排行榜第一的电影是："

	//异步获取接口数据
	function getInfo(url, errmes, id=0){

		//如果传递了id,url拼接id
		if(id !==0){
			url +=id;
		}

		return  new Promise(function(resolve,reject){
			let xhr = new XMLHttpRequest();
			xhr.onload = function(){
				resolve(JSON.parse(xhr.responseText));
			}
			xhr.onerror = function(){
				reject(errMsg);
			}
			xhr.open("GET",url);
			xhr.send();
		})

	}

	getInfo(url01,"获取电影排行榜失败").then(function(res){
		message += res.subjects[0].title;
		return getInfo(url02,"获取电影详情失败",res.subjects[0].id);
	})


	.then(function(res){
		message += "导演是："+res.directors[0].name;
		return getInfo(url03,"获取导演信息失败",res.directors[0].id);

	})

	.then(function(res){
		message += "家乡是："+res.born_place;
		document.querySelector("#main").innerHTML = message;
	},function(msg){
		console.log(msg);
	})
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
</script>

4. Promise方法

（1）then()

（2）catch()参数一个回调函数，promise状态为reject时调用，代替then中失败参数

例子：

<script>
	function timeout(){
		let randNum = Math.random() * 2;
		console.log(randNum);
		return new Promise(function(resolve,reject){
			if(randNum > 1){
				resolve();
			}else{
				reject();
			}
		})
	}

	timeout().then(function(){
		console.log("成功");
	})
	.catch(function(){
		console.log("失败");
	})
	                                                         
</script>

（3）all() 参数是数组，数组成员都是多个Promise对象

<script>
	function timeout01(){
		let randNum = Math.floor(Math.random() * 10);//0-9随机整数

		return new Promise(function(resolve,reject){
			setTimeout(function(){
				if(randNum > 5){
					resolve(randNum);
				}else{
					reject("timeout01失败");
				}
			},1000)
			
		})
	}

	function timeout02(){
		let randNum = Math.floor(Math.random() * 10)+10;//10-19随机整数

		return new Promise(function(resolve,reject){
			setTimeout(function(){
				if(randNum > 15){
					resolve(randNum);
				}else{
					reject("timeout02失败");
				}
			},2000)
			
		})
	}


	function timeout03(){
		let randNum = Math.floor(Math.random() * 10)+20;//20-29随机整数

		return new Promise(function(resolve,reject){
			setTimeout(function(){
				if(randNum > 25){
					resolve(randNum);
				}else{
					reject("timeout03失败");
				}
			},3000)
			
		})
	}

	Promise.all([timeout01(), timeout02(), timeout03()]).then(function(res){
		console.log(res);//Array [ 6, 18, 29 ]
	})
	.catch(function(res){
		console.log(res);
	})
	                                                         
</script>

(4) race() 参数是数组，数组成员都是Promise对象，输出最先完成的异步操作

例子一：

<script>
	function loadImage(){
		return new Promise(function(resolve,reject){
			let img = new Image();
			img.src = "http://c.hiphotos.baidu.com/image/pic/item/0824ab18972bd407cf293db177899e510eb30994.jpg";

			img.onload =function(){
				resolve(img);
			}
			img.onerror = function(){
				reject("图片加载失败");
			}
			
		})
	}

	function timeout(){

		return new Promise(function(resolve,reject){
			setTimeout(function(){
				reject("图片请求失败");
			},6000)
			
		})
	}

	Promise.race([loadImage(), timeout()]).then(function(res){
		document.body.appendChild(res);
	})
	.catch(function(res){
		console.log(res);//如果没用图片，直接输出timeout中“图片请求失败”
	})
	                                                         
</script>

all()和race()区别：

all()所有的Promise对象状态改变,才执行then；

race()执行最快的Promise，最快的Promise状态改变，其他Promise停止

5. JQuery中使用Promise

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<body>
	<div id="main"></div>
<script>
	//查找排行榜第一的电影的导演的家乡在哪

	//1. 排行榜
	let url01 = "http://api.unclealan.cn:4100/movie/top";

	//2. 电影详情
	let url02 = "http://api.unclealan.cn:4100/movie/subject/";

	//3. 电影人详情
	let url03 = "http://api.unclealan.cn:4100/movie/celebrity/";

	let message = "排行榜第一是："


	// 1. 排行榜
		$.ajax({
			url: url01,
			dataType: "json"

		}).then(function(res){
			message += res.subjects[0].title;
				return $.ajax({
					//2. 电影详情
					url: url02+res.subjects[0].id,
					dataType: "json"

			}).then(function(res){
				message += "；导演是："+res.directors[0].name;
				return $.ajax({
					//3. 电影人详情
					url: url03+res.directors[0].id,
					dataType: "json"
				})

			}).then(function(res){
				message += "；导演的家乡是："+res.born_place;
				document.querySelector("#main").innerHTML = message;
			}).catch(function(){
				console.log("请求失败");
			})

		})
</script>

 

ZhangXD_BLOG
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
es6-promise
04-02
es6-promise.auto.js ,可用于微信小程序开发，小程序里需要
es6-promise.auto.min.js
05-17
es6-promise.auto.min.js
es6-promise.js
09-10
一个轻量级库，提供用于组织异步代码ES6 Promis(subset of rsvp.js) , 在ES5中支持Promise
ES6-promise
weixin_34018202的博客
06-07 287
异步编程简述： 无论是在浏览器环境中还是在node环境中，我们都会使用JavaScript 完成各种异步操作，如在浏览器环境中的定时器、事件、ajax等或是node环 境中的文件读取、事件等。伴随着异步编程的就是回调机制（复习jQuery）。 明确一点异步编程避免不了回调。 let obj = {}; let fs = require('fs'); fs.readFile('./dat...
es6-promise.auto.js
10-31
<!-- Automatically provides/replaces `Promise` if missing or broken. --> [removed][removed] ...-- Minified version of `es6-promise-auto` below. --> [removed][removed] [removed][removed]
前端开源库-es6-promise-pool
08-29
前端开源库-es6-promise-poolES6 Promise池，在限制并发性的池中运行Promise。
es6-promise@4.1.1.zip
06-18
在 JavaScript 中，所有代码都是单线程的，也就是同步执行的。而 Promise 就为异步编程提供了一种解决方案。
【JS】ES6-Promise
m0_50947589的博客
06-20 419
Promise 是异步编程的一种解决方案： 从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。 promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。promise是用来解决两个问题的：回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象，提高代码的可读性。promise可以支持多个并发的请求，获取
es6---Promise
muzidigbig的博客
10-20 3659
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。它最早由社区提出并实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。1、主要用于异步计算2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果3、可以在对象之间传递和操作promise，帮助我们处理队列。
ES6--Promise
小鱼儿
01-15 1309
所谓Promise，就是一个对象，用来传递异步操作的消息。Promise对象有以下两个特点:对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、 Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种 状态，任何其他操作都无法改变这个状态。一旦状态改变，就不会再变，任何时候都可以得到这
关于ES6的Promise
四月
08-13 128
本文知识点摘自：https://www.cnblogs.com/lvdabao/p/es6-promise-1.html 本文例子摘自：https://segmentfault.com/a/1190000016848192 ES6 Promise 先拉出来遛遛 复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？是一个类？对象？数组？函数？ 别猜了，直接打印出来看看吧，console.dir(Promise)，就这么简单粗暴
es6-Promise
boss2967的博客
01-25 773
1.Promise对象的简单介绍 function want() { console.log('这是你想要执行的代码'); } function fn(want) { console.log('这里表示执行了一大堆各种代码'); // 返回Promise对象 return new Promise(function(resolve, reject) { ...
ES6------promise详解
weixin_40381947的博客
04-06 920
1.promise其实就是一个对象或者说是构造函数2.promise的出现（es6） 就是解决异步编程和回调地狱等问题，async和await的出现（ES8）就是基于promise的一种解决异步编程的终极解决方案（简化代码等等）3.在前端中，ajax和axios都会用到异步编程，axios更是基于promise的，所以一定要掌握promise以及用async和await搭配promise的使用。
ES6的Promise详解
最新发布
一步一个脚印，踏实努力，向着目标前进
07-09 1058
Promise.resolve、Promise.reject和Promise.all是Promise提供的一些常用方法，可以帮助我们更方便地处理异步操作。Promise是一种代表异步操作最终完成或失败的对象。在上面的示例中，我们使用Promise.resolve方法将一个Promise对象包装成一个新的Promise对象。在then方法中，我们可以获取到原始Promise对象的解决值，并进行相应的处理。在上面的示例中，我们使用Promise.reject方法创建一个被拒绝的Promise对象。
可以 使用es6-promise插件来弄吗
05-24
是的，你可以使用es6-promise插件来实现Promises。es6-promise是一个符合Promises / A +规范的Promise库，它提供了一个兼容性较好的Promise实现，并且支持所有主流浏览器和Node.js环境。你只需要在你的项目中引入es6...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值