不使用async+await，在for循环中使用Promise来 `消除回调`

使用ES7给我们提供的async和await，确实可以在一定程度上消除一些回调函数的使用，为我们的编程带来不少地方便。

例如，现在有一个函数：

function sleep(duration) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    },duration)
  })
}

我们现在想利用以上的函数实现这样一个需求，程序每睡上一秒，就打印一个"ok"，一共打印3次，那么我们的代码可能是这样的：

(async () => {
  for (let i = 0; i < 3; i++) {
    await sleep(1000);
    console.log("ok")
  }
})()

这样的代码当然是非常好的，它使用了async 和await ，消除了Promise原本的回调，让代码看起来更简洁，更优雅，同时也利于维护，可以让代码写在for循环里，每次遍历都让程序睡上1秒钟，非常灵活。

当然，本篇博客的目的不是为了介绍async 和await，而是我们应该考虑的是，如果没有async 和await，我们的代码是怎么编写的呢？

可能我们的代码不得不书写成这样：

sleep(1000).then(() => {
  console.log("ok");
  return sleep(1000);
}).then(() => {
  console.log("ok");
  return sleep(1000);
}).then(() => {
  console.log("ok");
  return sleep(1000);
})

Promise解决了回调地狱的问题，但是面对这样的需求，它的链式编程显得有点代码臃肿了。因为每一次调用then方法，实现的都是一样的逻辑。如果我要打印100次"ok"，那代码岂不是要写100份，可见这样的代码冗余度太高，难以维护。

思考：以上代码，可不可以写成一个for循环呢？

答案当然是可以的，写法如下：

for (let i = 0, pro = sleep(1000); i < 3; i++) {
  pro = pro.then(function () {
    console.log("ok");
    return sleep(1000);
  });
}

实际上我们可以看到，这样的写法，没有消除回调，它只适用于循环体内使用，但这样的代码，是比较容易维护和修改的。

本篇文章可以看作 js 代码书写的小技巧，当然有了async 和await以后，我们完全用不到这样的写法。但是代码的高效和整洁，以及可维护性，是我们每一个开发者应该关注且不可忽视的"小"细节。

如果看到本篇博客的你，有更好的写法或思路，欢迎评论区留言哦~