promise的异步性质
- 同步就是现在执行的代码,异步就是将来执行的代码,promise本身就是一个函数,在promise函数内部执行的代码就是同步的代码,但是 then执行的代码是异步的代码
- then执行异步代码的时候,优先级要高于 延时函数
- 每次链式调用then,都会创建新的异步
用一个火车以及车厢的例子来说明
- 一段程序实际上一辆火车,火车里又很多的车厢,现在可以知道了,所有的同步的代码或者说现在执行的代码是位于火车头,也是第一个车厢,延时函数(setTimeOut)的内部程序位于火车的末尾车厢
- 使用promise的时候,链式操作第一次调用then的时候,then里边的代码将会异步放到第二个车厢里,链式操作第二次调用then的时候,then里边的代码会异步放到第三个车厢里,以此类推…知道最后一个车厢
- 程序执行的时候,就是先执行火车头的代码(或者叫做第一个车厢的代码),然后执行第二个车厢的代码。然后再执行第三个车厢的代码,以此类推,直到执行问最后一个车厢的代码(或者叫火车末尾)
setTimeout(function(){
console.log("header...")
},0)
new Promise(function(resolve,reject){
console.log("start...")
resolve("center...")
console.log("end...")
}).then(function(data){
console.log(data)
})
console.log("footer...")
- 按照上面火车的思路来分析一下这段代码:
- 火车头的代码:(存放的是同步的代码或者叫现在执行的代码)有这些:console.log(“start…”)
resolve(“center…”)
console.log(“end…”)
console.log(“footer…”) - 第二个车厢的代码:就是第一次链式调用then的代码,有
console.log(data) // 等价于 console.log(“center…”) - 最后一个车厢的代码:就是延时函数的内部代码,有
console.log(“header…”) - 因此所有火车里的代码一次执行完之后,结果应该是这样的:
start…
end…
footer…
center…
header… - 看看实际结果:
- 完全符合,说明火车模型的分析是合理的
- 再进行一次测试:
setTimeout(function(){
console.log("header...")
},0)
setTimeout(function(){
console.log("center...")
},0)
new Promise(function(resolve,reject){
console.log("start...")
resolve(1)
console.log("end...")
}).then(function(data){
console.log(data)
return 3
}).then(function(data){
console.log(data)
return 4
}).then(function(data){
console.log(data)
})
new Promise(function(resolve,reject){
console.log("begain...")
resolve(2)
console.log("over...")
}).then(function(data){
console.log(data)
return 5
}).then(function(data){
console.log(data)
})
console.log("footer")
- 如果说第一眼就可以看出结果,那你真的很牛逼,异步的代码让人觉得很恶心我觉得。。
- 按照火车的模型进行分析:
- 第一个车厢的代码:(就是现在执行的代码)有这些:
console.log(“start…”)
resolve(1)
console.log(“end…”)
console.log(“begain…”)
resolve(2)
console.log(“over…”)
console.log(“footer”) - 第二个车厢的代码:(就是第一次链式调用then的代码),有这些:
console.log(data) // 等价于console.log(1)
return 3
console.log(data) // 等价于console.log(2)
return 5 - 第三个车厢的代码:(就是第二次链式调用then的代码),有这些:
console.log(data) // 等价于console.log(3)
return 4
console.log(data) // 等价于console.log(5) - 第四个车厢的代码:(就是第三次链式调用then的代码),有这些:
console.log(data) // 等价于console.log(4) - 最后一个车厢的代码:
console.log(“header…”)
console.log(“center…”) - 火车里的代码一次执行之后,结果是:
start…
end…
begain…
over…
footer
1
2
3
5
4
header…
center… - 看看实际的结果:
- 上面是node的运行结果,看看浏览器里的运行结果:
- 可以看见是一样的