JS如何实现Promise？Promise的原理-小浪学习网

promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），状态只能从pending变为fulfilled或rejected，且一旦改变不可逆转；当调用resolve时，状态由pending转为fulfilled，调用reject时转为rejected，此后状态不再变化。

JS如何实现Promise？Promise的原理

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 #<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);   });
```