💤💤💤你的javascript被睡了

段子

老板说：给客户做的项目，你的运行程序太快了，我建议你慢一点，客户付款速度就会快一点 我：我不会。。。 老板：没工资 我：马上

需求背景

请求后端a接口后拿到返回结果，需要等待2秒钟后才能请求b接口，b接口拿到返回结果后，需要等待3秒钟后才能请求c接口

项目原代码

main () {
    this.$http('a').then((resA) => {
        setTimeout(() => {
            this.$http('b').then((resB) => {
                setTimeout(() => {
                    this.$http('c')
                }, 3000)
            })
        }, 2000)
    })
}

这种写法，虽然是实现了效果，但是看着实在是脑瓜子疼

需求只是要求拿到接口后，有一定的休眠后再继续请求下一个接口，实际上只需要实现一个休眠的函数即可

理想写法

async main() {
    const resA = await this.$http('a')
    await sleep(2000)
    const resB = await this.$http('b')
    await sleep(3000)
    this.$http('c')
}

要是能够这样调用是不是舒服很多，省去了嵌套地狱，可读性得到了提高

从代码来看，实际的关键实现就是sleep函数，我们要怎么用js封装一个好用的sleep函数？

sleep函数实现

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function demo() {
  console.log('Taking a break...');
  await sleep(2000)
  console.log('Two seconds later, showing sleep in a loop...')

  // Sleep in loop
  for (let i = 0; i < 5; i++) {
    await sleep(2000)
    console.log(i)
  }
}

demo()

在上面的代码中，sleep()函数返回一个Promise对象。当Promise对象解决时，函数会继续执行。在demo()函数中，我们使用await关键字来等待sleep()函数的解决。这使得console.log()函数在等待指定的时间后才被调用，从而实现了sleep函数的效果。