js的promise实现原理

js的promise实现原理
Promise 是 JavaScript 中用于处理异步操作的一种方法。

它提供了一种更优雅和便捷的编程方式来处理异步操作，避免了回调地狱的问题。

Promise 的实现原理主要分为三个部分：状态（state）、回调函数（callbacks）和值（value）。

1. 状态（state）：
Promise 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

- 当一个 Promise 被创建时，它的初始状态是 pending。

- 当异步操作成功完成时，Promise 的状态变为 fulfilled。

- 当异步操作发生错误时，Promise 的状态变为 rejected。

状态的变化是不可逆的，一旦从 pending 变为 fulfilled 或rejected，就不会再发生改变。

2. 回调函数（callbacks）：
Promise 可以通过 then 方法注册成功和失败的回调函数。

- 当 Promise 的状态变为 fulfilled 时，会调用成功回调函数。

- 当 Promise 的状态变为 rejected 时，会调用失败回调函数。

每个 Promise 可以注册多个回调函数，它们会按照注册的顺序依次执行。

回调函数可以返回一个值或者一个新的 Promise，通过这种方式可以实现链式调用。

3. 值（value）：
Promise 可以在状态改变时传递一个值给回调函数。

- 当状态变为 fulfilled 时，可以传递一个成功的值给回调函数。

- 当状态变为 rejected 时，可以传递一个失败的值给回调函数。

值的传递是通过回调函数的参数来实现的。

Promise 的实现可以分为两个关键步骤：创建 Promise 对象和实现then 方法。

1. 创建 Promise 对象：
Promise 构造函数接受一个执行器函数作为参数，在执行器函数内部进行异步操作，并在异步操作完成时，根据结果改变 Promise 的状态和值。

执行器函数被立即调用，并提供两个参数：resolve 和 reject。

- resolve 函数用于将 Promise 的状态改为 fulfilled，并传递成功的值。

- reject 函数用于将 Promise 的状态改为 rejected，并传递失败的值。

2. 实现 then 方法：
Promise 的 then 方法用于注册成功和失败的回调函数，并返回一个新的 Promise。

then 方法接受两个参数：onFulfilled 和 onRejected。

- onFulfilled 是一个成功回调函数，当 Promise 的状态变为fulfilled 时调用。

- onRejected 是一个失败回调函数，当 Promise 的状态变为rejected 时调用。

then 方法会返回一个新的 Promise，它的状态和值取决于回调函数的返回值。

- 如果回调函数返回一个普通值，新的 Promise 的状态变为fulfilled，并传递该值。

- 如果回调函数返回一个 Promise，新的 Promise 的状态和值取决于返回的 Promise。

通过以上的步骤，我们就可以实现一个基本的 Promise。

以下是一个简单的 Promise 的实现示例：
```javascript
class MyPromise
constructor(executor)
this.state = 'pending';
this.value = undefined;
this.callbacks = [];
const resolve = (value) =>
if (this.state === 'pending')
this.state = 'fulfilled';
this.value = value;
this.callbacks.forEach(callback => this.handleCallback(callback));
}
};
const reject = (reason) =>
if (this.state === 'pending')
this.state = 'rejected';
this.value = reason;
this.callbacks.forEach(callback => this.handleCallback(callback));
}
};
try
executor(resolve, reject);
} catch (error)
reject(error);
}
}
handleCallback(callback)
const { onFulfilled, onRejected, resolve, reject } = callback;
if (this.state === 'fulfilled')
if (onFulfilled)
const valueOrPromise = onFulfilled(this.value);
resolve(valueOrPromise);
}
} else if (this.state === 'rejected')
if (onRejected)
const valueOrPromise = onRejected(this.value);
reject(valueOrPromise);
}
}
}
then(onFulfilled, onRejected)
return new MyPromise((resolve, reject) =>
this.callbacks.push
onFulfilled,
onRejected,
resolve,
reject,
});
if (this.state !== 'pending')
this.handleCallback(this.callbacks[0]);
}
});
}
```
以上是一个简单的 Promise 的实现原理。

通过状态、回调函数和值的处理，我们可以实现一个功能完备的 Promise。

实际上，JavaScript 中的原生 Promise 的实现要复杂得多，并且支持更多的特性，例如catch、finally、Promise.all、Promise.race等等。

但以上介绍的实现是 Promise 的核心部分，理解了这些核心概念，就能够理解 Promise 的工作原理。