promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），状态只能从pending变为fulfilled或rejected，且一旦改变不可逆转；当调用resolve时，状态由pending转为fulfilled，调用reject时转为rejected，此后状态不再变化。
Promise本质上是一种处理异步操作的模式，它代表着一个尚未完成的异步操作的结果。JS实现Promise的关键在于模拟Promise的状态管理和链式调用。
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = undefined;
this.reason = undefined;
this.onResolvedCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.onResolvedCallbacks.forEach(fn => fn(value));
}
};
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.reason = reason;
this.onRejectedCallbacks.forEach(fn => fn(reason));
}
};
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
then(onFulfilled, onRejected) {
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };
const promise2 = new MyPromise((resolve, reject) => {
if (this.state === 'fulfilled') {
setTimeout(() => { // 模拟异步
try {
const x = onFulfilled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
}
if (this.state === 'rejected') {
setTimeout(() => {
try {
const x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
}
if (this.state === 'pending') {
this.onResolvedCallbacks.push(() => {
setTimeout(() => {
try {
const x = onFulfilled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
});
this.onRejectedCallbacks.push(() => {
setTimeout(() => {
try {
const x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
});
}
});
return promise2;
}
catch(onRejected) {
return this.then(null, onRejected);
}
finally(callback) {
return this.then(
value => MyPromise.resolve(callback()).then(() => value),
reason => MyPromise.resolve(callback()).then(() => { throw reason })
);
}
static resolve(value) {
return new MyPromise((resolve, reject) => {
resolve(value);
});
}
static reject(reason) {
return new MyPromise((resolve, reject) => {
reject(reason);
});
}
static all(promises) {
return new MyPromise((resolve, reject) => {
const results = [];
let count = 0;
if (promises.length === 0) {
resolve(results);
return;
}
for (let i = 0; i < promises.length; i++) {
const promise = promises[i];
MyPromise.resolve(promise).then(
value => {
results[i] = value;
count++;
if (count === promises.length) {
resolve(results);
}
},
reason => {
reject(reason);
}
);
}
});
}
static race(promises) {
return new MyPromise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
const promise = promises[i];
MyPromise.resolve(promise).then(
value => {
resolve(value);
},
reason => {
reject(reason);
}
);
}
});
}
}
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
return reject(new TypeError('Chaining cycle detected for promise #'));
}
let called;
if ((typeof x === 'object' && x !== null) || typeof x === 'function') {
try {
const then = x.then;
if (typeof then === 'function') {
then.call(x,
y => {
if (called) return;
called = true;
resolvePromise(promise2, y, resolve, reject);
},
r => {
if (called) return;
called = true;
reject(r);
}
);
} else {
if (called) return;
called = true;
resolve(x);
}
} catch (e) {
if (called) return;
called = true;
reject(e);
}
} else {
resolve(x);
}
}
// Example usage:
const promise = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, Promise!');
}, 1000);
});
promise.then(value => {
console.log(value); // Output: Hello, Promise!
return 'Chained value';
}).then(value => {
console.log(value); // Output: Chained value
}).catch(err => {
console.error(err);
}); Promise的状态有哪些？状态转换是如何发生的？
Promise有三种状态：
pending（进行中）、
fulfilled（已成功）和
rejected（已失败）。状态转换只能从
pending到
fulfilled或
pending到
rejected，且一旦发生，状态便不可逆转。
-
Pending -> Fulfilled: 当异步操作成功完成，调用
resolve(value)
，Promise状态变为fulfilled
，并将结果值value
传递给所有then
方法注册的onFulfilled回调。 -
Pending -> Rejected: 当异步操作发生错误，调用
reject(reason)
，Promise状态变为rejected
，并将错误原因reason
传递给所有then
方法注册的onRejected回调。 -
状态不可逆转: Promise的状态一旦变为
fulfilled
或rejected
，就不能再变回pending
状态，也不能从fulfilled
变为rejected
，反之亦然。
如何处理Promise链中的错误？
在Promise链中，错误处理通常通过
catch方法或
then方法的第二个参数（onRejected）来实现。
catch方法本质上是
then(null, onRejected)的语法糖，用于捕获Promise链中任何地方抛出的错误。
-
catch
方法： 将catch
方法添加到Promise链的末尾，可以捕获链中任何未被处理的错误。如果前面的Promise抛出了错误，或者onFulfilled
回调中抛出了错误，catch
方法会被调用。promise .then(value => { // ... }) .then(value => { // ... throw new Error('Something went wrong'); // 抛出错误 }) .catch(error => { console.error('Error:', error); // 捕获错误 }); -
then
方法的第二个参数： 在then
方法中提供第二个参数onRejected
，也可以处理错误。但这种方式通常只用于处理紧邻的Promise的错误。promise .then( value => { // ... }, error => { console.error('Error:', error); // 捕获promise的错误 } ); 错误冒泡： 如果在Promise链的某个环节没有提供错误处理，错误会沿着Promise链向下冒泡，直到遇到
catch
方法或onRejected
回调。如果Promise链的末尾仍然没有处理错误，错误可能会被视为未处理的Promise rejection，导致一些环境（如浏览器）发出警告。
Promise.all 和 Promise.race 的区别是什么？它们分别适用于什么场景？
Promise.all和
Promise.race都是Promise的静态方法，用于处理多个Promise的并发执行，但它们的行为和适用场景有所不同。
-
Promise.all(promises)
：行为： 接收一个Promise数组（或任何可迭代对象），并返回一个新的Promise。只有当数组中所有的Promise都成功
fulfilled
时，返回的Promise才会fulfilled
，并且会将所有Promise的value
值按照数组顺序组成一个新的数组，作为返回Promise的value
。如果数组中任何一个Promiserejected
，返回的Promise会立即rejected
，并将第一个rejected
的Promise的reason
作为返回Promise的reason
。适用场景： 适用于需要等待所有异步操作完成后才能进行下一步操作的场景。例如，需要并行请求多个API，只有当所有API都返回数据后才能渲染页面。
-
示例：
const promise1 = Promise.resolve(1); const promise2 = Promise.resolve(2); const promise3 = Promise.resolve(3); Promise.all([promise1, promise2, promise3]) .then(values => { console.log(values); // Output: [1, 2, 3] }) .catch(error => { console.error(error); });
-
Promise.race(promises)
：行为： 接收一个Promise数组（或任何可迭代对象），并返回一个新的Promise。返回的Promise会采用数组中第一个
fulfilled
或rejected
的Promise的值或原因。也就是说，哪个Promise先完成（无论是成功还是失败），就采用它的结果。适用场景： 适用于只需要一个异步操作完成即可的场景。例如，设置请求超时，如果请求在规定时间内没有返回，就使用一个reject的Promise来取消请求。
-
示例：
const promise1 = new Promise(resolve => setTimeout(() => resolve('Promise 1'), 500)); const promise2 = new Promise(resolve => setTimeout(() => resolve('Promise 2'), 100)); Promise.race([promise1, promise2]) .then(value => { console.log(value); // Output: Promise 2 (因为promise2先完成) }) .catch(error => { console.error(error); });
简而言之，
Promise.all关注的是所有Promise的完成情况，而
Promise.race关注的是最先完成的Promise。
