湖州网站建设湖州网站建设,黄页网站介绍,智能产品,公司公司网站建设目录 1. 基本知识2. Demo3. 实战 1. 基本知识
Promise.all 是 JavaScript 中的一个方法#xff0c;它接受一个由 Promise 对象组成的数组作为参数#xff0c;并在所有 Promise 对象都变为 resolved#xff08;已完成#xff09;状态时才返回一个新的 Promise 对象#xf… 目录 1. 基本知识2. Demo3. 实战 1. 基本知识
Promise.all 是 JavaScript 中的一个方法它接受一个由 Promise 对象组成的数组作为参数并在所有 Promise 对象都变为 resolved已完成状态时才返回一个新的 Promise 对象这个新的 Promise 对象的状态也变为 resolved其值是一个包含了所有 Promise 对象结果的数组
如果其中任何一个 Promise 对象被 rejected已拒绝那么 Promise.all 返回的 Promise 对象的状态就会变为 rejected第一个被拒绝的 Promise 对象的值会作为这个 Promise 对象的值
主要的作用如下
并行执行多个异步操作并在它们全部完成后执行相应的操作可用于等待多个异步任务全部完成后进行后续处理比如在页面加载时同时加载多个资源
基本的语法如下Promise.all(iterable);
iterable: 一个可迭代对象通常是一个包含多个 Promise 对象的数组
2. Demo
一、等待多个异步请求完成后进行处理
const promise1 new Promise((resolve, reject) {setTimeout(() resolve(Promise 1 finished), 1000);
});const promise2 new Promise((resolve, reject) {setTimeout(() resolve(Promise 2 finished), 2000);
});Promise.all([promise1, promise2]).then(results {console.log(results); // 输出: [Promise 1 finished, Promise 2 finished]// 所有异步请求都已完成可以进行后续操作}).catch(error {console.error(error);// 如果有任何一个 Promise 被 rejected则会在这里捕获到错误});截图如下 二、处理多个异步操作的结果
function fetchUserData() {return new Promise((resolve, reject) {setTimeout(() resolve(User data fetched), 1500);});
}function fetchPosts() {return new Promise((resolve, reject) {setTimeout(() resolve(Posts fetched), 2000);});
}Promise.all([fetchUserData(), fetchPosts()]).then(results {const [userData, posts] results;console.log(userData); // 输出: User data fetchedconsole.log(posts); // 输出: Posts fetched// 所有异步请求都已完成可以进行后续操作}).catch(error {console.error(error);// 如果有任何一个 Promise 被 rejected则会在这里捕获到错误});三、处理其中一个 Promise 被拒绝的情况
const promise1 new Promise((resolve, reject) {setTimeout(() resolve(Promise 1 finished), 1000);
});const promise2 new Promise((resolve, reject) {setTimeout(() reject(Promise 2 failed), 1500);
});Promise.all([promise1, promise2]).then(results {console.log(results); // 不会执行因为有一个 Promise 被拒绝}).catch(error {console.error(error); // 输出: Promise 2 failed// 只要有一个 Promise 被拒绝就会在这里捕获到错误});3. 实战
此处实战不可完整执行只是方便理解
迭代计算多个数值最后在展示页面显示到折线图中 或者时显示在图表中
