关于js异步编程的理解与练习

js小白刚学异步, 有错误的地方及理解希望大家及时指出,谢谢大家

重点检查代码的执行顺序

---

.then和.catch后面是回调函数, 回调函数是需要加到event loop队列等待执行的(按加入顺序执行, FIFO先进先出)

---

Event Loop是一个回调函数队列。当异步函数执行时，回调函数会被压入这个队列。JavaScript引擎直到异步函数执行完成后，才会开始处理事件循环。这意味着JavaScript代码不是多线程的，即使表现的行为相似。事件循环是一个先进先出（FIFO）队列，这说明回调是按照它们被加入队列的顺序执行的。

---

<script>
        let p = (time) => {
            return new Promise((res, err) => {
                if (time > 3000) {
                    console.log(time)
                    res(`时间为${time}`)
                    console.log('已经执行完')
                } else {
                    err('时间小于3秒')
                }
            })
        }
        // (1)先输出 0
        console.log(0)

        // (2)再输出 4000 已经执行完
        // .then .catch是回调函数
        // 回调函数加入了 Event Loop 队列等待执行

        p(4000).then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })

        // (3)再输出1
        // (4)再输出2
        console.log(1)
        console.log(2)

        // (5)再输出5000 已经执行完
        // .then .catch是回调函数
        // 回调函数加入了 Event Loop队列等待执行

        p(5000).then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })

        // .then .catch是回调函数
        // 回调函数加入了 Event Loop队列等待执行

        p(1000).then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })
        /*
            最后输出结果:
            0
            4000
            已经执行完
            1
            2
            5000
            已经执行完
            时间为4000
            时间为5000
            时间小于3秒
        */
    </script>

---

JavaScript异步编程可参考:
Javascript异步编程的4种方法–阮一峰的网络日志
js-异步机制与同步机制