💤💤💤你的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()函数在等待指定的时间后才被调用，从而实现了s