新手学习promise踩的坑

先看一段promise实例的代码，猜想一下执行结果

function getPromise(func,delay){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      console.log(new Date().getTime());
      func();
      resolve(delay);
    },delay)
  })
}
function func1(){
  console.log("func1");
}
function func2(){
  console.log("func2");
}
function func3(){
  console.log("func3");
}
console.log(new Date().getTime());
getPromise(func1,5000)
  .then((x)=>{
    getPromise(func2,7000);
  })
  .then((x)=>{
    getPromise(func3,5000);
  })
console.log("haha");

执行结果如图所示：

执行结果是不是跟你预想的一致呢？如果一致您就没必要看下去了，如果不一致，您就可以跟随博主一起学习下promise了~
博主写这个例子的时候预期是希望先打印func1，接着是func2，最后是func3，因为promise可以实现异步嘛，既然输出结果跟预期不一致，那就仔细理解一下promise的原理吧
ES6中说：then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。
回顾上述代码，then方法中并没有显示调用return，即函数执行完并没有返回新的promise对象，所以第二个then方法并不会等待第一个then方法执行结束才执行，而是在第一次调用getPromise方法resolve后就开始执行了，所以出现了如上的结果，既然知道原因了，那如何修改代码实现预期效果呢？

• 显示调用return

getPromise(func1,5000)
  .then((x)=>{
    return getPromise(func2,7000);
  })
  .then((x)=>{
    return getPromise(func3,5000);
  })

• 通过箭头函数直接返回（当箭头函数里面只有一条语句的时候可以把函数的中括号去掉然后返回值就是这条语句的返回值）

getPromise(func1,5000)
  .then(()=>getPromise(func2,7000))
  .then(()=>getPromise(func3,5000))

现在执行结果如下所示：

查找promise相关资料时发现一个很好的博客，建议新手好好看看：http://efe.baidu.com/blog/promises-anti-pattern/