javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS Promise执行顺序

JavaScript中Promise的执行顺序举例详析

作者:mosen868

这篇文章主要介绍了JavaScript中Promise执行顺序的相关资料,通过示例代码分析,展示了同步任务、微任务和宏任务的执行顺序,并解释了为什么第一个then返回Promise时,输出顺序会发生变化,文中介绍的非常详细,需要的朋友可以参考下

概述

理解 Promise 的执行顺序时,需要牢记以下两点:

示例代码分析

代码分析

以下代码可以帮助理解 Promise 和 setTimeout 的执行顺序:

console.log("script start");

setTimeout(() => {
  console.log("setTimeout 1");
}, 0);

Promise.resolve()
  .then(() => {
    console.log("promise 1");
    return Promise.resolve().then(() => {
      console.log("promise 2");
    });
  })
  .then(() => {
    console.log("promise 3");
  });

setTimeout(() => {
  console.log("setTimeout 2");
}, 0);

console.log("script end");

执行过程解析

最终输出

综合以上,代码的输出顺序为:

script start
script end
promise 1
promise 2
promise 3
setTimeout 1
setTimeout 2

总结

(拓展)问题补充

如果第一个then不是返回return promise,而是直接执行一个Promise.resolve().then(() => { console.log("promise 2"); });结果是不是
会变成 promise 1 → promise 3 → promise 2。结果是的。

为什么会这样?

当 Promise.resolve().then() 不通过 return 将内部的 Promise 链接到外部 then 时,promise 2 的执行不再是当前链的一部分,它会被单独添加到 微任务队列的末尾,导致执行顺序的变化。

示例代码

以下是修改后的代码:

console.log("script start");

Promise.resolve()
  .then(() => {
    console.log("promise 1");
    Promise.resolve().then(() => {
      console.log("promise 2");
    });
  })
  .then(() => {
    console.log("promise 3");
  });

console.log("script end");

执行过程解析

总输出结果

综合以上,完整的输出顺序是:

script start
script end
promise 1
promise 3
promise 2

关键点解析

改变的核心代码

两种写法的区别在于是否将新的 Promise 加入当前链。

总结

到此这篇关于JavaScript中Promise的执行顺序举例详析的文章就介绍到这了,更多相关JS Promise执行顺序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文