在前端开发中，Promise 是一种常用的异步编程解决方案。在面试中，手写一个 Promise 已经成为了必考的内容之一。那么，Promise 的原理和实现是什么呢？本文将详细介绍 Promise 的原理和实现，并提供示例代码和学习指导。
Promise 的原理
Promise 是一种异步编程解决方案，它可以在异步操作完成之后返回一个结果或者错误信息。Promise 有三种状态，分别是 pending（等待态）、fulfilled（成功态）和 rejected（失败态）。当 Promise 的状态从 pending 转化为 fulfilled 或者 rejected 时，就会触发 then 方法指定的回调函数。
Promise 的核心思想是将异步操作封装成一个 Promise 对象，然后通过链式调用的方式处理异步操作的结果。Promise 对象有以下几个特点：
- Promise 对象只能由异步操作（通常是一个函数）返回，同步操作无法返回 Promise 对象；
- Promise 对象一旦创建，就会立即执行异步操作；
- Promise 对象可以通过 then 方法指定 fulfilled 和 rejected 状态的回调函数；
- Promise 对象可以通过 catch 方法指定 rejected 状态的回调函数；
- Promise 对象可以通过 finally 方法指定无论成功或失败都要执行的回调函数。
Promise 的实现
下面是一个简单的 Promise 实现：
// www.javascriptcn.com code example
class Promise {
constructor(executor) {
this.status = 'pending';
this.value = undefined;
this.reason = undefined;
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = (value) => {
if (this.status === 'pending') {
this.status = 'fulfilled';
this.value = value;
this.onFulfilledCallbacks.forEach((fn) => fn());
}
};
const reject = (reason) => {
if (this.status === 'pending') {
this.status = 'rejected';
this.reason = reason;
this.onRejectedCallbacks.forEach((fn) => fn());
}
};
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
then(onFulfilled, onRejected) {
const newPromise = new Promise((resolve, reject) => {
const fulfilled = () => {
try {
const value = onFulfilled(this.value);
resolve(value);
} catch (error) {
reject(error);
}
};
const rejected = () => {
try {
const reason = onRejected(this.reason);
reject(reason);
} catch (error) {
reject(error);
}
};
if (this.status === 'fulfilled') {
fulfilled();
} else if (this.status === 'rejected') {
rejected();
} else {
this.onFulfilledCallbacks.push(fulfilled);
this.onRejectedCallbacks.push(rejected);
}
});
return newPromise;
}
catch(onRejected) {
return this.then(null, onRejected);
}
finally(onFinally) {
return this.then(
(value) => Promise.resolve(onFinally()).then(() => value),
(reason) =>
Promise.resolve(onFinally()).then(() => {
throw reason;
})
);
}
}上述代码中，Promise 类有一个构造函数，它接收一个 executor 函数作为参数。executor 函数被立即执行，它接收两个参数 resolve 和 reject，它们分别表示异步操作成功和失败时的回调函数。在构造函数中，我们定义了一些属性来保存 Promise 对象的状态和结果，以及成功和失败状态下的回调函数。
then 方法用来指定 Promise 对象状态变为 fulfilled 或者 rejected 时的回调函数。如果 Promise 对象的状态已经是 fulfilled 或者 rejected，那么就立即执行回调函数。如果 Promise 对象的状态还是 pending，那么就将回调函数加入到成功或失败状态下的回调函数列表中。
catch 方法用来指定 Promise 对象状态变为 rejected 时的回调函数，它实际上是一个语法糖，相当于调用 then 方法并传入 null 和回调函数。
finally 方法用来指定无论 Promise 对象的状态是成功还是失败，都要执行的回调函数。它实际上是一个语法糖，相当于调用 then 方法并传入两个回调函数，一个是成功状态下的回调函数，另一个是失败状态下的回调函数。
示例代码
下面是一个使用 Promise 的示例代码：
// www.javascriptcn.com code example
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const random = Math.random();
if (random > 0.5) {
resolve('success');
} else {
reject('failure');
}
}, 1000);
});
}
fetchData()
.then((result) => {
console.log(result);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('done');
});上述代码中，fetchData 函数返回一个 Promise 对象，它模拟了一个异步操作。然后，我们通过链式调用的方式处理异步操作的结果，使用 then 方法指定成功状态下的回调函数，使用 catch 方法指定失败状态下的回调函数，使用 finally 方法指定无论成功还是失败都要执行的回调函数。
学习指导
手写一个 Promise 是一项非常有挑战性的任务，它需要对 JavaScript 语言的异步编程机制有深入的理解。在学习 Promise 的过程中，我们建议多看一些相关的文档和教程，多写一些相关的代码，以加深对 Promise 的理解。
同时，我们也需要注意 Promise 的一些常见问题，比如 Promise 的链式调用、Promise 的错误处理、Promise 的取消等等。只有对这些问题有深入的了解，才能够真正掌握 Promise 的使用和实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d15985a941bf71342e0066