将Promise分步编写出来，最终亲手敲一个
2023-10-16 15:15:17
什么是Promise？
Promise 是 JavaScript 中用于表示异步操作的最终完成（或失败）及其结果值的对象。它提供了一种统一的机制来处理异步操作的结果，从而使代码更加易于阅读和维护。
为什么我们需要Promise？
在 JavaScript 中，异步操作非常常见。例如，当您向服务器发送一个请求时，您并不知道服务器什么时候会返回响应。您需要等待服务器返回响应，然后才能继续执行您的代码。在等待期间，您的代码可能会被阻塞，从而导致性能问题。
Promise 可以帮助我们解决这个问题。当您向服务器发送一个请求时，您可以创建一个 Promise 对象。这个 Promise 对象表示服务器的响应。您可以使用 then() 方法来注册一个回调函数，以便在服务器返回响应时执行这个回调函数。这样，您就可以继续执行您的代码，而不必等待服务器返回响应。
如何使用Promise？
Promise 对象有三种状态：
pending：这是 Promise 对象的初始状态。此时，异步操作尚未完成。fulfilled：这是 Promise 对象的成功状态。此时，异步操作已成功完成，并且结果值可以通过then()方法获取。rejected：这是 Promise 对象的失败状态。此时，异步操作已失败，并且错误信息可以通过catch()方法获取。
您可以使用 then() 方法来注册一个回调函数，以便在 Promise 对象的状态发生改变时执行这个回调函数。回调函数有两个参数：
resolve：这是一个函数，用于将 Promise 对象的状态设置为fulfilled。reject：这是一个函数，用于将 Promise 对象的状态设置为rejected。
您可以使用 catch() 方法来注册一个回调函数，以便在 Promise 对象的状态变为 rejected 时执行这个回调函数。回调函数有一个参数：
error：这是一个包含错误信息的错误对象。
手写Promise
现在，我们来学习如何手写一个 Promise 对象。以下是如何创建一个 Promise 对象的步骤：
- 创建一个 Promise 对象的构造函数。
- 在 Promise 对象的构造函数中，接受两个参数：
resolve和reject。 - 在 Promise 对象的构造函数中，创建一个私有变量
state，用于存储 Promise 对象的状态。 - 在 Promise 对象的构造函数中，创建一个私有变量
value，用于存储 Promise 对象的结果值。 - 在 Promise 对象的构造函数中，创建一个私有变量
callbacks，用于存储注册的回调函数。 - 在 Promise 对象的构造函数中，为
resolve和reject函数添加一个then()方法。 - 在 Promise 对象的
then()方法中，将回调函数添加到callbacks数组中。 - 在 Promise 对象的构造函数中，为
resolve和reject函数添加一个catch()方法。 - 在 Promise 对象的
catch()方法中，将回调函数添加到callbacks数组中。 - 在 Promise 对象的构造函数中，为
resolve和reject函数添加一个finally()方法。 - 在 Promise 对象的
finally()方法中，将回调函数添加到callbacks数组中。 - 在 Promise 对象的构造函数中，将
state属性设置为pending。
以下是如何使用 Promise 对象的步骤：
- 创建一个 Promise 对象。
- 使用
then()方法注册一个回调函数。 - 使用
catch()方法注册一个回调函数。 - 使用
finally()方法注册一个回调函数。 - 调用
resolve()或reject()函数来改变 Promise 对象的状态。
示例
以下是一个手写 Promise 对象的示例：
function Promise(executor) {
this.state = 'pending';
this.value = undefined;
this.callbacks = [];
executor(resolve, reject);
function resolve(value) {
if (this.state !== 'pending') {
return;
}
this.state = 'fulfilled';
this.value = value;
for (var i = 0; i < this.callbacks.length; i++) {
this.callbacks[i](this.value);
}
}
function reject(error) {
if (this.state !== 'pending') {
return;
}
this.state = 'rejected';
this.value = error;
for (var i = 0; i < this.callbacks.length; i++) {
this.callbacks[i](this.value);
}
}
}
Promise.prototype.then = function(onFulfilled, onRejected) {
return new Promise((resolve, reject) => {
this.callbacks.push(() => {
try {
const value = onFulfilled(this.value);
resolve(value);
} catch (error) {
reject(error);
}
});
this.callbacks.push(() => {
try {
const value = onRejected(this.value);
resolve(value);
} catch (error) {
reject(error);
}
});
});
};
Promise.prototype.catch = function(onRejected) {
return this.then(undefined, onRejected);
};
Promise.prototype.finally = function(onFinally) {
return this.then(
() => {
onFinally();
},
() => {
onFinally();
}
);
};
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, world!');
}, 1000);
});
promise
.then((value) => {
console.log(value);
})
.catch((error) => {
console.log(error);
})
.finally(() => {
console.log('Done!');
});
总结
Promise 对象是 JavaScript 中用于表示异步操作的最终完成（或失败）及其结果值的对象。它提供了一种统一的机制来处理异步操作的结果，从而使代码更加易于阅读和维护。通过本教程，您应该对 Promise 对象有了一个更深入的了解，并且能够在您的 JavaScript 代码中使用它们来编写更加优雅和可维护的代码。
