2026前端面试题(二)

注意以下术语，成功表示resolve，失败表示reject

每个 Promise 对象都有且仅有三种状态

状态	含义	触发方式
Pending（待定）	初始状态，操作尚未完成	创建 Promise 时
Fulfilled（已成功）	操作成功完成	调用 `resolve()`
Rejected（已失败）	操作失败	调用 `reject()`

重要特性：Promise 一旦从 Pending 变为 Fulfilled 或 Rejected，状态就不可再改变。

链式操作

情况一

function step1() {
return new Promise(resolve => {
setTimeout(() => {
console.log("步骤 1 完成");
resolve(10); // 传递数据给下一步
}, 1000);
});
}

function step2(value) {
return new Promise(resolve => {
setTimeout(() => {
console.log("步骤 2 收到:", value);
resolve(value * 2); // 10 * 2 = 20
}, 1000);
});
}

function step3(value) {
return new Promise(resolve => {
setTimeout(() => {
console.log("步骤 3 收到:", value);
resolve(value + 5); // 20 + 5 = 25
}, 1000);
});
}

// 链式调用，清晰优雅
step1()
.then(result => step2(result))
.then(result => step3(result))
.then(finalResult => {
console.log("最终结果:", finalResult); // 输出: 最终结果: 25
})
.catch(err => {
// 链中任何一步出错，都会在这里捕获
console.error("某一步出错了:", err);
});

结果：步骤 1 完成

步骤 2 收到: 10

步骤 3 收到: 20

最终结果: 25

情况二

function step1() {
return new Promise((resolve,rej) => {
setTimeout(() => {
console.log("步骤 1 完成");
rej(10); // 传递数据给下一步
}, 1000);
});
}

function step2(value) {
return new Promise(resolve => {
setTimeout(() => {
console.log("步骤 2 收到:", value);
resolve(value * 2); // 10 * 2 = 20
}, 1000);
});
}

function step3(value) {
return new Promise(resolve => {
setTimeout(() => {
console.log("步骤 3 收到:", value);
resolve(value + 5); // 20 + 5 = 25
}, 1000);
});
}

// 链式调用，清晰优雅
step1()
.then(result => step2(result))
.then(result => step3(result))
.then(finalResult => {
console.log("最终结果:", finalResult); // 输出: 最终结果: 25
})
.catch(err => {
// 链中任何一步出错，都会在这里捕获
console.error("某一步出错了:", err);
});

结果：步骤 1 完成

某一步出错了: 10

ps：只要一步出错，后面所有的then都不会执行

Promise.all

全部成功才算成功，才会执行then

Promise.allSettled

复制代码

const promises = [
 Promise.resolve("成功 A"),
 Promise.reject("失败 B"),
 Promise.resolve("成功 C")
];

Promise.allSettled(promises)
 .then(results => {
   console.log(results);
   // 输出:
   // [
   //   { status: 'fulfilled', value: '成功 A' },
   //   { status: 'rejected', reason: '失败 B' },
   //   { status: 'fulfilled', value: '成功 C' }
   // ]
 });

注意这里即使有一个失败也会执行then，可以跟promise.all对比一下

Promise.race

返回最先完成的那个 Promise 的结果（无论成功或失败）

Promise.any

返回首个成功的 Promise，注意Promise.race返回的是首个完成

async / await 语法糖

让异步代码看起来更像同步代码