面试教训：对于异步的思考

对于异步的思考

• 今天面试的时候，面试官的一个问题直接指出了我的盲区，一直以来，对于javascript异步执行原理我一直不是特别明白，面试官真是一阵见血
• 在《你不知道的js 中卷》里有说明这么一个问题：对于javascript的异步和回调函数的使用之所以这么难理解，最直接的原因是因为我们的大脑更喜欢顺序执行的代码，但是异步执行或者说回调函数会让代码的执行顺序很乱，会让代码很难理解并进行维护
• 说句实在话，如果遇见很多的异步代码我头就大

setTimeout(()=>{
    console.log("header...")
},0)

var p = new Promise(function(resolve,reject){
    console.log("before...")
    resolve(3)
    console.log("after...")
}).then(function(data){
    console.log(data)
})

console.log("footer")

• 思考这段代码的执行结果会是什么？
  
• 再看看这个

setTimeout(()=>{
    console.log("header...")
},0)

var p = new Promise(function(resolve,reject){
    console.log("before...")
    resolve(3)
    console.log("after...")
}).then(function(data){
    console.log(data)
    return 4
}).then(function(data){
    console.log(data)
    return 5
}).then(function(data){
    console.log(data)
})

console.log("footer")

• 可以看见，promise里边的then实际上就是一个异步的方法，但是他的“优先级”比延时函数setTimeOut要高，这里面一定有原因的，但是我找了很多的promise源码，试过之后，发现还是不符合promise的定义
• 我之前尝试性的写的仿promise，then实际上是同步的，而不是异步的，某种意义上说没能成功还原原生的promise

setTimeout(()=>{
    console.log("header...")
},0)
new Opromise(function(resolve,reject){
    console.log("before...")
    resolve(4)
    console.log("after...")
}).then(function(data){
    console.log(data)
})
console.log("footer...")

• 可以看见，没能实现promise原本的异步
• 真正的promise

setTimeout(()=>{
    console.log("header...")
},0)
new Promise(function(resolve,reject){
    console.log("before...")
    resolve(4)
    console.log("after...")
}).then(function(data){
    console.log(data)
})
console.log("footer...")

• 对比一下两个结果：
  
• ^这是仿promise
  
• ^这是真正的promise
• 看来还得好好研究了…