Promise-all方法
本文的内容可以用于再次简化上一篇 promise 练习当中的代码，还是用一个需求来引出本文的知识点吧：
需求
- 无序加载图片, 每加载成功一张就添加一张
- 无序加载图片, 只有所有图片都加载成功才添加, 有一张图片失败都不添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise-all方法</title>
</head>
<body>
<script>
const arr = [
"https://a.msstatic.com/huya/main3/assets/img/index/recomBg_2dc2e.jpg",
"https://livewebbs2.msstatic.com/huya_1642157781_content.jpg",
"https://a.msstatic.com/huya/main3/assets/img/index-bg_59f9c.jpg",
];
const loadImage = (url) => {
return new Promise((resolve, reject) => {
let oImg = new Image();
let time = Math.random() * 1000;
// console.log(time);
setTimeout(() => {
oImg.src = url;
}, time);
// oImg.src = url;
oImg.onload = () => {
resolve(oImg);
}
oImg.onerror = () => {
reject("图片加载失败了");
}
});
}
for (let i = 0; i < arr.length; i++) {
loadImage(arr[i]).then((oImg) => {
console.log(i);
document.body.appendChild(oImg);
}, (msg) => {
console.log(msg);
});
}
</script>
</body>
</html>
Promise 的 all 静态方法
all 方法接收一个数组, 如果数组中有多个 Promise 对象, 只有都成功才会执行 then 方法, 并且会按照添加的顺序, 将所有成功的结果重新打包到一个数组中返回给我们, 如果数组中不是 Promise 对象, 那么会直接执行 then 方法。应用场景: 批量加载, 要么一起成功, 要么一起失败。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise-all方法</title>
</head>
<body>
<script>
const arr = [
"https://a.msstatic.com/huya/main3/assets/img/index/recomBg_2dc2e.jpg",
"https://livewebbs2.msstatic.com/huya_1642157781_content.jpg",
"https://a.msstatic.com/huya/main3/assets/img/index-bg_59f9c.jpg",
];
const loadImage = (url) => {
return new Promise((resolve, reject) => {
let oImg = new Image();
let time = Math.random() * 1000;
// console.log(time);
setTimeout(() => {
oImg.src = url;
}, time);
// oImg.src = url;
oImg.onload = () => {
resolve(oImg);
}
oImg.onerror = () => {
reject("图片加载失败了");
}
});
}
let p1 = new Promise(function (resolve, reject) {
resolve("111");
// reject("aaa");
});
let p2 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("222");
}, 5000);
});
let p3 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("333");
}, 3000);
});
Promise.all([p1, p2, p3]).then(function (result) {
console.log("成功", result);
}, function (err) {
console.log("失败", err);
});
</script>
</body>
</html>
利用 promise 的 all 方法改造一下如上的案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise-all方法</title>
</head>
<body>
<script>
const arr = [
"https://a.msstatic.com/huya/main3/assets/img/index/recomBg_2dc2e.jpg",
"https://livewebbs2.msstatic.com/huya_1642157781_content.jpg",
"https://a.msstatic.com/huya/main3/assets/img/index-bg_59f9c.jpg",
];
const loadImage = (url) => {
return new Promise((resolve, reject) => {
let oImg = new Image();
let time = Math.random() * 1000;
// console.log(time);
setTimeout(() => {
oImg.src = url;
}, time);
// oImg.src = url;
oImg.onload = () => {
resolve(oImg);
}
oImg.onerror = () => {
reject("图片加载失败了");
}
});
}
Promise.all([loadImage(arr[0]), loadImage(arr[1]), loadImage(arr[2])])
.then((result) => {
// console.log(result);
result.forEach((oImg) => {
document.body.appendChild(oImg);
});
})
.catch((e) => {
console.log(e);
});
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具