本文的内容可以用于再次简化上一篇 promise 练习当中的代码，还是用一个需求来引出本文的知识点吧：
需求
- 无序加载图片, 每加载成功一张就添加一张
- 无序加载图片, 只有所有图片都加载成功才添加, 有一张图片失败都不添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise-all方法</title>
</head>
<body>
<script>
const arr = [
"https://img.yuanmabao.com/zijie/pic/2023/09/28/sbvd1x2ty20.jpg",
"https://img.yuanmabao.com/zijie/pic/2023/09/28/jotpxyjistp.jpg",
"https://img.yuanmabao.com/zijie/pic/2023/09/28/mish5ghv2dq.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://img.yuanmabao.com/zijie/pic/2023/09/28/sbvd1x2ty20.jpg",
"https://img.yuanmabao.com/zijie/pic/2023/09/28/jotpxyjistp.jpg",
"https://img.yuanmabao.com/zijie/pic/2023/09/28/mish5ghv2dq.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 方法改造一下如上的案例：
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise-all方法</title>
</head>
<body>
<script>
const arr = [
"https://img.yuanmabao.com/zijie/pic/2023/09/28/sbvd1x2ty20.jpg",
"https://img.yuanmabao.com/zijie/pic/2023/09/28/jotpxyjistp.jpg",
"https://img.yuanmabao.com/zijie/pic/2023/09/28/mish5ghv2dq.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>我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表
