Promise中的链式流

在这里插入图片描述

如果阅读有疑问的话,欢迎评论或私信!!
本人会很热心的阐述自己的想法!谢谢!!!
携手共进!

前言

在探索Promise链式流之前我们要知道两个Promise固有行为特性:

  • 在Promise的每个then()方法之后,都会返回一个全新的Promise;(1)
  • 不管在这个全新的Promise中返回值是什么,他都会被自动设置为被链接的Promise完成;(2)

深入Promise链式流

或许知道这两个特性后有些不太理解,那我们通过下面这个例子来一起认识吧!

var p1  = Promise.resolve(1); //这里p1是一个Promise并且决议值为1
var p2 = p1.then(function(msg){
		return msg * 100;//在返回这个值时,同时返回了一个Promise,证明(1)时正确的!!
});

p2.then(function(msg){//此时p2的决议值为100,被自动设置为了完成状态,也就是(2)所说。
	console.log(msg) //100
})

现在我们应该掌握了以上两个行为特性的原理!!!!!

但是,在上面代码中,我们需要使用p2来充当中间变量,这样看起来有点奇奇怪怪的……那现在我们可以引入我们的主题:Promise 的链式流。

我们可以把上面的代码改造一下:

Promise.resolve(1)
.then(function(msg){

		return msg * 100;//在返回这个值时,同时返回了一个Promise,证明(1)时正确的!!
		
}).then(function(v){//此时p2的决议值为100,被自动设置为了完成状态,也就是(2)所说。

	console.log(v) //100
	
})

这一下我们就看起来舒服了许多(强迫症的福音…)

现在我们就可以通过then进行扩展,第一步then、第二步then…可以一直扩展下去!

引入异步

但是在上面的代码中,我们使用了return来结束第一步,即立即完成第一步进行第二步,那么如果我们需要在第一步时进行异步编程的话,那么第二步是直接进行还是等待第一步异步编程结束后再进行呢?

我们当然希望Promise的第二步是在等待第一步异步完成之后再继续执行,因为我们使用Promise的最大好处就是可以使得异步编程变得可控!如果第二步直接进行,那么我们的代码顺序又要变得混乱起来!我们通过以下代码更深刻记忆:

var p = Promise.resolve(1);

p.then(function(v){

	return new Promise(function(resolve,reject){
	
		resolve( v * 100 );
		
	})
	
}).then(function(v){

	console.log(v)	//100
	
})

在该代码中,Promise在推进的同时,会展开then中的Promise,并作为最终的决议值!

这也是Promise的一个行为特性!!

下面引入setTimeout来查看是否如我们所说!

var p = Promise.resolve(1);

p.then(function(v){

	return new Promise(function(resolve,reject){
		setTimeout(fuction(){
			resolve( v * 100 );
		},1000)
	})
	
}).then(function(v){
	//等待1000ms后开始运行
	console.log(v)	//100
	
})

如我们所见,Promise链式流是一步一步进行的,如果遇到异步操作,会根据需要等待之后完成!

在Promise中还有更解决了回调中的一些问题,详情请移步至本人所写的另外一篇文章,这里附上链接Pormise—如何解决javascript中回调的信任问题?【详解】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员小井

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值