如果阅读有疑问的话,欢迎评论或私信!!
本人会很热心的阐述自己的想法!谢谢!!!
携手共进!
文章目录
前言
在探索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中回调的信任问题?【详解】