当前位置：首页 > news >正文

Promise 构造函数与 `then` 方法的执行机制：同步与异步

news 2026/3/27 4:15:41

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

在 JavaScript 中，Promise是一种用于处理异步操作的机制，但它在执行过程中涉及到同步和异步两种行为。理解Promise构造函数和then方法的执行机制对于正确使用Promise和避免潜在的错误至关重要。本文将深入探讨Promise构造函数和then方法的执行机制，并通过实际代码示例进行说明。

一、Promise 构造函数的执行机制

Promise构造函数用于创建一个新的Promise实例。它的语法如下：

constpromise=newPromise((resolve,reject)=>{// 执行逻辑});

resolve是一个函数，用于将Promise状态改为成功（fulfilled）。
reject是一个函数，用于将Promise状态改为失败（rejected）。

（一）Promise 构造函数是同步执行的

Promise构造函数中的执行器（executor）是同步执行的。这意味着在new Promise被调用时，执行器函数会立即被调用，而不会等待异步操作完成。

示例 1：Promise 构造函数的同步执行

console.log("1. Start");constmyPromise=newPromise((resolve,reject)=>{console.log("2. Inside Promise executor");resolve("Promise resolved!");});console.log("3. End");

输出：

1. Start 2. Inside Promise executor 3. End

在这个例子中：

首先打印"1. Start"。
然后执行Promise构造函数中的执行器函数，打印"2. Inside Promise executor"。
最后打印"3. End"。

可以看到，Promise构造函数中的执行器是同步执行的，它会立即运行，而不会等待异步操作完成。

（二）Promise 的状态改变是异步的

虽然Promise构造函数中的执行器是同步执行的，但Promise的状态改变（从pending到fulfilled或rejected）是异步的。当调用resolve或reject时，Promise的状态不会立即改变，而是被放入微任务队列（microtask queue）中，等待当前同步代码执行完毕后再处理。

示例 2：Promise 状态改变的异步性

console.log("1. Start");constmyPromise=newPromise((resolve,reject)=>{console.log("2. Inside Promise executor");resolve("Promise resolved!");console.log("3. After resolve");});console.log("4. End");myPromise.then((result)=>{console.log("5. Promise resolved:",result);});

输出：

1. Start 2. Inside Promise executor 3. After resolve 4. End 5. Promise resolved: Promise resolved!

在这个例子中：

首先打印"1. Start"。
然后执行Promise构造函数中的执行器函数，打印"2. Inside Promise executor"。
调用resolve后，打印"3. After resolve"。
继续执行同步代码，打印"4. End"。
最后，Promise的状态改变被放入微任务队列，当前同步代码执行完毕后，微任务队列中的任务被执行，打印"5. Promise resolved: Promise resolved!"。

二、`then`方法的执行机制

Promise.prototype.then方法用于注册处理Promise成功或失败的回调函数。它的语法如下：

promise.then(onFulfilled,onRejected);

onFulfilled是一个可选的回调函数，当Promise成功时被调用。
onRejected是一个可选的回调函数，当Promise失败时被调用。

（一）`then`方法是异步执行的

then方法的回调函数是异步执行的。即使Promise的状态已经改变（例如，Promise已经被resolve或reject），then方法中的回调函数也不会立即执行，而是被放入微任务队列中，等待当前同步代码执行完毕后再处理。

示例 3：`then`方法的异步执行

console.log("1. Start");constmyPromise=newPromise((resolve,reject)=>{console.log("2. Inside Promise executor");resolve("Promise resolved!");});console.log("3. End");myPromise.then((result)=>{console.log("4. Promise resolved:",result);});

输出：

1. Start 2. Inside Promise executor 3. End 4. Promise resolved: Promise resolved!

在这个例子中：

首先打印"1. Start"。
然后执行Promise构造函数中的执行器函数，打印"2. Inside Promise executor"。
调用resolve后，继续执行同步代码，打印"3. End"。
最后，Promise的状态改变被放入微任务队列，当前同步代码执行完毕后，微任务队列中的任务被执行，打印"4. Promise resolved: Promise resolved!"。

（二）`then`方法的链式调用

then方法返回一个新的Promise，因此可以链式调用。每个then方法的回调函数都会被放入微任务队列中，按照它们被注册的顺序依次执行。

示例 4：`then`方法的链式调用

console.log("1. Start");constmyPromise=newPromise((resolve,reject)=>{console.log("2. Inside Promise executor");resolve("Promise resolved!");});console.log("3. End");myPromise.then((result)=>{console.log("4. First then:",result);return"New value";}).then((result)=>{console.log("5. Second then:",result);});

输出：

1. Start 2. Inside Promise executor 3. End 4. First then: Promise resolved! 5. Second then: New value

在这个例子中：

首先打印"1. Start"。
然后执行Promise构造函数中的执行器函数，打印"2. Inside Promise executor"。
调用resolve后，继续执行同步代码，打印"3. End"。
最后，Promise的状态改变被放入微任务队列，当前同步代码执行完毕后，微任务队列中的任务按顺序执行：
- 第一个then的回调函数被调用，打印"4. First then: Promise resolved!"，并返回"New value"。
- 第二个then的回调函数被调用，打印"5. Second then: New value"。

文章目录

相关文章：