Promise 的三种状态的理解
Promise 是一种用来处理异步操作的对象，它可以代替回调函数，让我们可以更方便地处理异步代码。Promise 有三种状态：Pending（进行中）、Fulfilled（已成功）和Rejected（已失败）。
1. Pending（进行中）
当我们创建一个 Promise 实例时，它的状态初始值为 Pending（进行中）。这表示异步操作尚未完成。
const promise = new Promise((resolve, reject) => {
// 异步操作
});
console.log(promise); // Promise {<pending>}2. Fulfilled（已成功）
当异步操作成功完成时，Promise 状态会变为 Fulfilled（已成功），并调用 resolve 函数将结果传递给 Promise 实例。
const promise = new Promise((resolve, reject) => {
// 异步操作成功
resolve('Success!');
});
promise.then(result => console.log(result)); // Success!
console.log(promise); // Promise {<fulfilled>: "Success!"}3. Rejected（已失败）
当异步操作发生错误时，Promise 状态会变为 Rejected（已失败），并调用 reject 函数将错误信息传递给 Promise 实例。
const promise = new Promise((resolve, reject) => {
// 异步操作失败
reject(new Error('Error!'));
});
promise.catch(error => console.log(error)); // Error!
console.log(promise); // Promise {<rejected>: Error: Error!}4. 总结
了解 Promise 的三种状态可以帮助我们更好地理解和处理异步代码。我们可以通过 .then 方法处理异步成功的结果，通过 .catch 方法处理异步失败的结果。同时，我们还可以使用 .finally 方法处理无论异步操作成功或失败都需要执行的代码。
// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
// 异步操作成功
resolve('Success!');
});
promise
.then(result => console.log(result)) // Success!
.catch(error => console.log(error)) // 没有执行
.finally(() => console.log('Promise completed.')); // Promise completed.5. 学习与指导意义
了解 Promise 的三种状态是前端开发中非常重要的基础知识。掌握 Promise 可以帮助我们更好地处理异步操作，提高代码的可读性和可维护性。同时，我们还需要在实际开发中尽可能避免回调地狱，减少代码的复杂度，使之更易于维护。
getData() .then(data => processData(data)) .then(result => displayResult(result)) .catch(error => handleError(error));
值得注意的是，当使用 Promise 处理异步操作时，我们应该始终使用 try ... catch 语句捕获可能发生的错误。如果我们没有进行错误处理，那么一旦出现错误，程序将会崩溃。因此，我们应该谨慎操作。
6. 示例代码
以下是一个通过 Promise 处理异步请求的示例代码：
// javascriptcn.com 代码示例
function request(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(new Error(xhr.statusText));
}
}
};
xhr.onerror = () => {
reject(new Error('Network Error'));
};
xhr.send();
});
}
request('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response))
.catch(error => console.log(error));以上示例代码通过 XMLHttpRequest 发送异步请求，当请求成功时调用 resolve 函数将结果传递给 Promise 实例，当请求失败时调用 reject 函数将错误信息传递给 Promise 实例，最后通过 .then 和 .catch 方法处理异步成功和失败的情况。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652d13c57d4982a6ebe8ccb4