JavaScript-Promise的使用及详细解释

JavaScript-Promise的使用及详细解释

  • 案例
    • 使用多种方法实现以下案例
      • 第一种---setTimeout嵌套
      • 第二种---封装函数
  • Promise详解
      • 小案例
      • 第三种---使用Promise来实现最开始的案例
    • Promise---具体使用的案例
      • 第一版---点击按钮显示图片
      • 第二版---加载出第一张之后在加载其他,依次加载
      • 第三版---图片中谁先加载完成,谁就先显示
      • 第四版---等待图片全部加载完毕,所有图片一起显示
  • 封装Jsonp

案例

使用多种方法实现以下案例

案例目标

  • “你好”----2秒后输出
  • “你笑起来真好看你”----3.5秒后输出
  • “你能做我的男朋友吗”----1.5秒后输出

第一种—setTimeout嵌套

  • 使用嵌套的setTimeout定时器来实现
  • 缺点:层级太深,需要嵌套,如果项目大,显得复杂
var arr = [
	"你好",
	"你笑起来真好看你",
	"你能做我的男朋友吗"
]
setTimeout(function() {
	console.log(arr[0]);
	setTimeout(function() {
		console.log(arr[1]);
		setTimeout(function() {
			console.log(arr[2]);
		},1500)
	},3500)
},2000)	

第二种—封装函数

  • 通过回调函数调用
  • 缺点:如果层级很多,会出现回调地狱
// 第二种 封装函数等方法
function  say(msg,time,callback) {
	setTimeout(function() {
		console.log(msg);
		if(callback) {
			callback();
		}
	},time);
}
// 调用
say("你好",2000,function() {
	say("你笑起来真好看",3500,function() {
		say("你能做我男朋友吗?",1500)
	})
})

Promise详解

  • Promise 承诺 (异步延时调用-层级扁平)
  • resolve 兑现承诺
  • reject 拒绝兑现
  • then() 获取兑现结果
  • catch() 获取拒绝的原因

小案例

function bigHouse() {
	return new Promise(function(resolve,reject) {
		setTimeout(function() {
			var n = Math.random();
			if(n > .5) {
				// 想要兑现承诺,但是还没有实现
				resolve("我已经在CBD买了三层大洋楼,前面花园,后面游泳池,顶层停机坪");
			}else {
				
				reject("今年疫情原因,业绩不好");
			}
		})
	})
}
bigHouse()
.then( res => {
	console.log("兑现承诺的结果");
})
.catch( err => {
	console.log("拒绝兑现承诺的原因");
})

第三种—使用Promise来实现最开始的案例

  • 实现了延期调用—避免调用
// 第三种
function say(msg,time) {
	return new Promise(function(resolve,reject) {
		setTimeout(function() {
			resolve(msg);
		},time)
	})
}

say("你好",2000)
.then( res => {
	console.log(res);
	return say("你笑起来真好看",3500);
})
.then( res => {
	console.log(res);
	return say("你能做我男朋友吗?",3500);
})
.then( res => {
	console.log(res);
})

Promise—具体使用的案例

第一版—点击按钮显示图片

<body>
	<button id="btn">加载</button>
</body>
	<script type="text/javascript">
		var pics = [
		    "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7bc54a61b927dd8c54ddd39a0acf0254.jpg?w=632&h=340",
		    "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/94c74e01afe50a86c3a87ff030b85781.jpg?w=632&h=340",
		    "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
		]
		// 使用Promise 写法,单击按钮 btn,加载显示pics李米娜的第一张图片
		function loadImage(url) {
			// 返回一个promise对象
			return new Promise(function(resolve,reject) {
				// 创建一个图片节点
				var img = document.createElement("img");
				// 设置url
				img.src = url;
				// 当加载成功时返回图片
				img.onload = function() {resolve(img)};
				// 当家在失败时,返回失败的原因
				img.onerror = function(e) {reject(e)};
			})
		}
		
		// 触发事件,调用事件
		btn.onclick = function() {
			loadImage(pics[0])
			.then( res => {
				// 将返回的图片元素加载到数据中
				document.body.append(res);
			})
			.catch( err => {
				console.log(err);
			})
		}
</script>

第二版—加载出第一张之后在加载其他,依次加载

  • 套用promise
  • 重复返回
var pics = [
	"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7bc54a61b927dd8c54ddd39a0acf0254.jpg?w=632&h=340",
	"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/94c74e01afe50a86c3a87ff030b85781.jpg?w=632&h=340",
	"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
]
// 使用Promise 写法,单击按钮 btn,加载显示pics李米娜的第一张图片
function loadImage(url) {
	// 返回一个promise对象
	return new Promise(function(resolve,reject) {
		// 创建一个图片节点
		var img = document.createElement("img");
		// 设置url
		img.src = url;
		// 当加载成功时返回图片
		img.onload = function() {resolve(img)};
		// 当家在失败时,返回失败的原因
		img.onerror = function(e) {reject(e)};
	})
}

loadImage(pics[0])
.then( res => {
	// 将返回的图片元素加载到数据中
	document.body.append(res);
	// 再次返回这个事件
	return loadImage(pics[1]);
})
// 因为上个成功回调,重新返回了一个promise所以再次需要成功的回调
.then( res => {
	// 将返回的图片元素加载到数据中
	document.body.append(res);
	return loadImage(pics[2]);
})
.then( res => {
	// 将返回的图片元素加载到数据中
	document.body.append(res);
})
.catch( err => {
	console.log(err);
})

第三版—图片中谁先加载完成,谁就先显示

  • Promise.race()
  • Promise.race([所用加载的数据]).then( res => {成功的承诺结果回调}).catch( err => {失败的承诺原因回调})
// 第三版 图片中谁先加载完成,谁就先显示
Promise.race([loadImage(pics[0]),loadImage(pics[1]),loadImage(pics[2])])
.then( res => {
	document.body.append(res);
});

第四版—等待图片全部加载完毕,所有图片一起显示

  • Promise.all()
  • Promise.all([所用加载的数据]).then( res => {成功的承诺结果回调}).catch( err => {失败的承诺原因回调})
Promise.all([loadImage(pics[0]),loadImage(pics[1]),loadImage(pics[2])])
.then( res => {
	for(var img in res) {
		document.body.append(res[img]);
	}
});

封装Jsonp

  • 封装Jsonp用到了Promise
  • 参考
    封装-Jsonp

热门文章

暂无图片
编程学习 ·

Python3 元类编程

在Python中一切接对象,类也是一个对象,所有的类都是有type类创建,我们实际开发中最常用的type方法,是用来获取某个对象的类型的,例如type(1) ⇒ int 、type(‘str’) ⇒ str。但是type还有一种用法,就是用来创建类的。 1、通过type动态创建无父类、无属性的类 People = t…
暂无图片
编程学习 ·

Django入门笔记:第十三章、用户登录

前言 从之前的学习我们发现,一直在blog应用中进行开发。本章开始新建另一个App来开发,介绍Django的身份认证模块,实现用户登录、注册、注销。 一个简单的登录界面 创建应用 为了实现用户登录、退出、注册等功能,从而进行用户管理,创建一个新的应用。 python manage.py sta…
暂无图片
编程学习 ·

实战系列-Spring Cloud微服务中三把利器Feign、Hystrix、Ribbon

导语在之前的分享中分享过关于Fegin的底层实现原理,以及Spring Cloud OpenFegin的启动原理。在这次的分享中主要总结一下Spring Cloud 微服务架构的三把利器。对于Fegin、Hystrix、Ribbon三个组件来说它们之间是什么样的关系。怎么样综合使用等这些问题就是这次分享的内容文章…
暂无图片
郑州普通话 ·

学习笔记六——循环神经网络

一、RNN 前馈神经网络&#xff1a;信息往一个方向流动。包括MLP和CNN 循环神经网络&#xff1a;信息循环流动&#xff0c;网络隐含层输出又作为自身输入&#xff0c;包括RNN、LSTM、GAN等。 RNN模型结构如下图所示&#xff1a; 展开之后相当于堆叠多个共享隐含层参数的前馈…
暂无图片
代理记账 ·

学习笔记六——循环神经网络

一、RNN 前馈神经网络&#xff1a;信息往一个方向流动。包括MLP和CNN 循环神经网络&#xff1a;信息循环流动&#xff0c;网络隐含层输出又作为自身输入&#xff0c;包括RNN、LSTM、GAN等。 RNN模型结构如下图所示&#xff1a; 展开之后相当于堆叠多个共享隐含层参数的前馈…
暂无图片
cgfy ·

8. 源码分析之ConsumeQueue

源码分析之ConsumeQueue 消息发送时数据在ConsumeQueue的落地 ​ 连续发送5条消息&#xff0c;消息是不定长&#xff0c;首先所有信息先放入 Commitlog中&#xff0c;每一条消息放入Commitlog的时候都需要上锁&#xff0c;确保顺序的写入。 ​ 当Commitlog写成功了之后。数据…
暂无图片
coreui ·

Heap Sort 讲解

Heap Sort sorts a group of unordered elements using the Heap data structure. The sorting algorithm using a Min Heap is as follows: Heapify all elements into a Min HeapRecord and delete the top elementPut to top element into an array T that stores all so
暂无图片
未来博客 ·

Heap Sort 讲解

Heap Sort sorts a group of unordered elements using the Heap data structure. The sorting algorithm using a Min Heap is as follows: Heapify all elements into a Min HeapRecord and delete the top elementPut to top element into an array T that stores all so
暂无图片
建站日记 ·

[react] 你觉得react上手快不快?它有哪些限制?

[react] 你觉得react上手快不快&#xff1f;它有哪些限制&#xff1f; 相对vue来说不快。 限制 需要学习JSX需要工程化的配置需要对原生JavaScript有相当的掌握react只是一个UI层面的库&#xff0c;像vue内置了动画处理、keep-alive等功能&#xff0c;react则需要去找第三方库…
暂无图片
mfbz ·

学习笔记六——循环神经网络

一、RNN 前馈神经网络&#xff1a;信息往一个方向流动。包括MLP和CNN 循环神经网络&#xff1a;信息循环流动&#xff0c;网络隐含层输出又作为自身输入&#xff0c;包括RNN、LSTM、GAN等。 RNN模型结构如下图所示&#xff1a; 展开之后相当于堆叠多个共享隐含层参数的前馈…
暂无图片
mfbz ·

AOV网是否存在回路-拓扑排序-C++

拓扑排序是对测试AOV网是否存在回路的方法&#xff01; 拓扑排序的过程中&#xff0c;由于需要查找所有以某顶点为尾的弧&#xff0c;即找到该顶点的所有出边&#xff0c;故图要采用邻接表的存储方式。但拓扑排序较邻接表的存储方式有一点不同&#xff0c;由于要查找入度为0的点…
暂无图片
珊珊日记 ·

AOV网是否存在回路-拓扑排序-C++

拓扑排序是对测试AOV网是否存在回路的方法&#xff01; 拓扑排序的过程中&#xff0c;由于需要查找所有以某顶点为尾的弧&#xff0c;即找到该顶点的所有出边&#xff0c;故图要采用邻接表的存储方式。但拓扑排序较邻接表的存储方式有一点不同&#xff0c;由于要查找入度为0的点…
暂无图片
珊珊日记 ·

8. 源码分析之ConsumeQueue

源码分析之ConsumeQueue 消息发送时数据在ConsumeQueue的落地 ​ 连续发送5条消息&#xff0c;消息是不定长&#xff0c;首先所有信息先放入 Commitlog中&#xff0c;每一条消息放入Commitlog的时候都需要上锁&#xff0c;确保顺序的写入。 ​ 当Commitlog写成功了之后。数据…