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

前端八股-promise

news 2025/7/12 13:09:19

引言

在 JavaScript 里，Promise 是处理异步操作的一种对象，它代表着一个异步操作的最终完成（或失败）及其结果值。Promise 主要用于解决回调地狱问题，让异步代码的书写更具可读性和可维护性。下面为你介绍 Promise 的相关内容。

Promise 的三种状态

pending：初始状态，既不是成功也不是失败。
fulfilled：意味着操作成功完成。
rejected：表示操作失败。

Promise 的状态一旦从 pending 变为 fulfilled 或者 rejected，就不会再发生改变，会一直保持这个结果，这就是所谓的resolved（已定型）。

题目1

问题

// This is a JavaScript Quiz from BFE.devconsole.log(1)
const promise = new Promise((resolve) => {console.log(2)resolve()console.log(3)
})console.log(4)promise.then(() => {console.log(5)
}).then(() => {console.log(6)
})console.log(7)setTimeout(() => {console.log(8)
}, 10)setTimeout(() => {console.log(9)
}, 0)

结果

1 （同步）
2 （Promise构造函数同步执行）
3 （Promise构造函数同步执行）
4 （同步）
7 （同步）
5 （微任务：第一个then）
6 （微任务：第二个then）
9 （宏任务：延迟0ms的setTimeout）
8 （宏任务：延迟10ms的setTimeout）

分析

这段代码涉及 JavaScript 的同步代码执行顺序、Promise 微任务（microtask） 和定时器宏任务（macrotask） 的执行机制，JavaScript 是单线程的，代码会先按顺序执行同步任务，遇到异步任务会放入对应的任务队列，等待同步任务执行完毕后再先执行微任务，然后执行宏任务，并且Promise 构造函数中的回调是同步执行的：

题目二

问题

// This is a JavaScript Quiz from BFE.devnew Promise((resolve, reject) => {resolve(1)resolve(2)reject('error')
}).then((value) => {console.log(value)
}, (error) => {console.log('error')
})

结果

答案为1

分析

关键规则：状态一旦从 pending 变为 fulfilled 或 rejected，就会永久固定，后续再调用 resolve 或 reject 都无效。

new Promise((resolve, reject) => {resolve(1);  // ① 首次调用，状态从 pending → fulfilled，值为 1resolve(2);  // ② 状态已固定为 fulfilled，此调用无效reject('error');  // ③ 状态已固定，此调用无效
}).then((value) => { console.log(value); },  // 成功回调(error) => { console.log('error'); }  // 失败回调
)

题目三

问题

// This is a JavaScript Quiz from BFE.devPromise.resolve(1)
.then(() => 2)
.then(3)
.then((value) => value * 3)
.then(Promise.resolve(4))
.then(console.log)

结果

这段代码的输出结果是 6

`分析`

.then() 期望接收一个回调函数作为参数，如果传入的不是函数（如 then(3) 或 then(Promise.resolve(4))），会被自动忽略，并直接透传上一个 Promise 的结果值。

Promise.resolve(1)                // 初始值为 1
.then(() => 2)                   // 返回 2 → 值变为 2
.then(3)                         // 3 不是函数，被忽略 → 值仍为 2
.then((value) => value * 3)      // 值 2 × 3 → 返回 6
.then(Promise.resolve(4))        // Promise.resolve(4) 不是函数，被忽略 → 值仍为 6
.then(console.log)               // 打印最终值 6

题目四

问题

// This is a JavaScript Quiz from BFE.devPromise.resolve(1)
.then((val) => {console.log(val)return val + 1
}).then((val) => {console.log(val)
}).then((val) => {console.log(val)return Promise.resolve(3).then((val) => {console.log(val)})
}).then((val) => {console.log(val)return Promise.reject(4)
}).catch((val) => {console.log(val)
}).finally((val) => {console.log(val)return 10
}).then((val) => {console.log(val)
})