JavaScript Promise 的立即执行问题

今天在练习高并发任务,发现我对于Promise的执行时机有所误解,需求是构建一个任务数组用于后续按需执行。

问题代码

js 复制代码
    const mockUserDataTask = (id) =>
      new Promise((resolve) =>{
        console.log(`用户数据 ${id} 加载中`),
        setTimeout(() => resolve(`用户数据 ${id} 加载完成`), 3000)
      });

		 const test = [
		  { id: "task-1", func: mockUserDataTask(1) },
		  { id: "task-2", func: mockUserDataTask(2) },
		  { id: "task-3", func: mockUserDataTask(3) },
		  { id: "task-4", func: mockUserDataTask(4) },
		];

    test[0].func.then((res) => {
      console.log(res);
      test[2].func.then((res) => {
        console.log(res);
      });
    });

    test[1].func.then((res) => {
      console.log(res);
      test[3].func.then((res) => {
        console.log(res);
      });
    });

预期执行顺序:

先启动任务1和任务2,完成后启动任务3和任务4

实际执行顺序:

所有4个任务同时启动


为什么会同步加载4个Promise 对象?

Promise 对象在创建时会立即执行。

💡 这是因为Promise的构造函数部分是同步执行的,传入的 executor 函数会立即调用;而resolve/reject回调的(.then()/.catch())是异步的属于Microtask(微任务)

  • 当我直接调用 mockUserDataTask(id) 时,Promise 构造函数会立即执行
  • 这意味着我在创建 test 数组时,4个 Promise 已经同时开始执行(包括它们的 setTimeout
  • 所以会立即看到所有4个"加载中"

采用闭包的方式解决这一问题:

  • 外层函数返回的是一个新的函数,而不是直接返回Promise
  • 只有在调用 func() 时才会创建并执行Promise

正确写法

// ❌ Promise立即执行 const task = new Promise(executor);

// ✅ 延迟执行(闭包) const createTask = () => new Promise(executor);

js 复制代码
	  //使用闭包有效解决
	  const mockUserDataTask = (id) => () => new Promise((resolve) => {
      console.log(`用户数据 ${id} 加载中`)
      setTimeout(() => {
          console.log('执行了')
          resolve(`用户数据 ${id} 加载完成`)
      }, 3000)
    });
    
    test[0].func().then((res) => {
      console.log(res);
      test[2].func().then((res) => {
        console.log(res);
      });
    });
相关推荐
Liu.7746 分钟前
vue3组件之间传输数据
前端·javascript·vue.js
|晴 天|6 分钟前
前端闭包:从概念到实战,解锁JavaScript高级技能
开发语言·前端·javascript
全栈前端老曹35 分钟前
【ReactNative】核心组件与 JSX 语法
前端·javascript·react native·react.js·跨平台·jsx·移动端开发
小小黑00742 分钟前
快手小程序-实现插屏广告的功能
前端·javascript·小程序
@万里挑一1 小时前
vue中使用虚拟列表,封装虚拟列表
前端·javascript·vue.js
黑臂麒麟1 小时前
Electron for OpenHarmony 跨平台实战开发:Electron 文件系统操作实战
前端·javascript·electron·openharmony
1024肥宅1 小时前
工程化工具类:模块化系统全解析与实践
前端·javascript·面试
weixin_422555421 小时前
ezuikit-js官网使用示例
前端·javascript·vue·ezuikit-js
running up2 小时前
Java集合框架之ArrayList与LinkedList详解
javascript·ubuntu·typescript
xiaoxue..2 小时前
React 之 Hooks
前端·javascript·react.js·面试·前端框架