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 { 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 { 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
。如果数组中任何一个Promise
rejected
，返回的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。
以上就是JS如何实现Promise？Promise的原理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517008.html
微信扫一扫 
支付宝扫一扫 
