JavaScript的promise异步操作解决问题学习
什么是promise
在 JavaScript 中，Promise 是一种用于处理异步操作的对象。它表示一个尚未完成的操作，但可以在未来某个时间点完成或失败。Promise 使得异步代码更加简洁和直观，尤其是在需要处理多个回调函数时，它可以有效避免回调地狱（callback hell）。
Promise 的三种状态：
Pending（待定）：
Promise 刚创建，操作尚未完成，此时既没有成功，也没有失败。
Fulfilled（已完成）：
异步操作成功完成，Promise 返回成功结果。
Rejected（已拒绝）：
异步操作失败，Promise 返回失败原因。
Promise 的基本用法
创建
// 异步操作
let success = true;
if (success) {
resolve("操作成功");
} else {
reject("操作失败");
}
});
//在这个例子中，resolve 用于表示操作成功，reject 用于表示操作失败。
Promise 构造函数接收一个执行函数（executor），该函数有两个参数：resolve 和 reject。
Promise 的使用（then 和 catch）
promise
.then(function(result) {
console.log("成功:", result);
})
.catch(function(error) {
console.log("失败:", error);
});
//.then() 方法在 Promise 成功时调用，并接收成功结果作为参数。
//.catch() 方法在 Promise 失败时调用，并接收失败原因作为参数。
Promise 的使用（使用async 和 await）
async/await 是 JavaScript 中用于处理异步操作的语法糖，它建立在 Promise 的基础之上，使得异步代码看起来更像同步代码，从而提高代码的可读性和可维护性
async function fetchDataAsync() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchDataAsync();
async 函数：在函数声明前添加 async 关键字，表明这个函数是异步的。async 函数默认返回一个 Promise，即使函数内部没有显式返回 Promise 对象。
await 表达式：只能在 async 函数内部使用，用于等待一个 Promise 被解决（resolved）或拒绝（rejected）。await 会暂停 async 函数的执行，直到 Promise 处理完成，然后返回结果。
Promise 链式调用
Promise 的强大之处在于它支持链式调用，使得多个异步操作可以顺序执行，而不用陷入回调嵌套的困境。例如：
let promise = new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000); // 模拟异步操作
});
promise
.then(function(result) {
console.log(result); // 1
return result * 2;
})
.then(function(result) {
console.log(result); // 2
return result * 2;
})
.then(function(result) {
console.log(result); // 4
});
//例子中，每个 .then() 都返回一个新的 Promise，并将结果传递给下一个 .then()，这就是链式调用的原理
Promise 的重要方法
Promise.all()
Promise.all() 方法接收一个包含多个 Promise 的数组，只有当所有 Promise 都成功时，它才会返回成功结果；如果其中一个失败，则整个 Promise.all() 失败。
let promise1 = Promise.resolve(3);
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 1000, 'foo'));
let promise3 = 42;
Promise.all([promise1, promise2, promise3])
.then((values) => {
console.log(values); // [3, 'foo', 42]
});
Promise.race()
Promise.race() 返回第一个完成（无论成功还是失败）的 Promise。
let promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, "第一个"));
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, "第二个"));
Promise.race([promise1, promise2])
.then((result) => {
console.log(result); // 第二个
});
Promise.allSettled()
Promise.allSettled() 不管是成功还是失败，它都会等待所有的 Promise 完成，并返回每个 Promise 的结果状态。
let promise1 = Promise.resolve("成功");
let promise2 = Promise.reject("失败");
Promise.allSettled([promise1, promise2])
.then((results) => results.forEach((result) => console.log(result)));
结果：
{ status: ‘fulfilled’, value: ‘成功’ }
{ status: ‘rejected’, reason: ‘失败’ }
关于更多promise的介绍，大家可以去看《你所不知道的JavaScript》中册
原文地址：https://blog.csdn.net/qq_55018264/article/details/142874115
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！