02代码输出结果-异步promise-finally

最新推荐文章于 2023-08-25 21:06:21 发布

Silent_crab

最新推荐文章于 2023-08-25 21:06:21 发布

阅读量459

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 前端文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/Silent_crab/article/details/121005936

前端同时被 2 个专栏收录

36 篇文章

订阅专栏

JavaScript

13 篇文章

订阅专栏

这篇博客深入探讨了JavaScript中Promise的工作原理，特别是`.then`和`.finally`方法的执行顺序。通过示例代码解释了微任务队列如何影响异步执行，揭示了Promise如何按照特定顺序打印输出。重点在于理解JavaScript事件循环和微任务的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <script>
        Promise.resolve('1')
            .then(res => {
                console.log(res)
            })
            .finally(() => {
                console.log('finally')
            })
        Promise.resolve('2')
            .finally(() => {
                console.log('finally2')
            })
            .then(res => {
                console.log('finally2后面的then函数，', res)
            })
    </script>

代码输出结果
1
finally2
finally
finally2后面的then函数， 2

其实一开始百思不得其解，不应该是按顺序执行吗
先1，然后执行finally，输出finally，为什么先输出finally2呢？因为finally本质是then方法的特例，其实把上面的finally换成then，输出的顺序也是这样的。then是一个微任务，finally当然也是，当我们执行完

.then(res => {
                console.log(res)
            })

之后，遇到了

  .finally(() => {
                console.log('finally')
            })

就会把它放到微任务队列里，等待下一轮的执行，而

  Promise.resolve('2')
            .finally(() => {
                console.log('finally2')
            })

和

  Promise.resolve('1')
            .then(res => {
                console.log(res)
            })

是同一轮的。