Promise中的链式流

news2024/12/26 2:11:35

在这里插入图片描述

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

文章目录

前言
深入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
	
})