promise的异步性质

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的运行结果，看看浏览器里的运行结果：
  
• 可以看见是一样的