需求
一次加载一张图片添加到 body 中，前面图片加载失败后面图片不加载：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise练习</title>
</head>
<body>
<script>
const arr = [
"https://a.msstatic.com/huya/main3/assets/img/index/recomBg_2dc2e.jpg",
"https://a.msstatic.com/huya/main3/assets/img/index/recomBg_2dc2e.jpg",
"https://a.msstatic.com/huya/main3/assets/img/index/recomBg_2dc2e.jpg",
];
const loadImage = (url) => {
return new Promise((resolve, reject) => {
let oImg = new Image();
oImg.src = url;
oImg.onload = function () {
resolve(oImg);
}
oImg.onerror = function () {
reject("图片加载失败");
}
});
}
/*
简化之前的代码
let p2 = loadImage(arr[0]).then(function (oImg) {
// console.log(oImg);
console.log("1");
document.body.appendChild(oImg);
return loadImage(arr[1]);
}, function (msg) {
console.log(msg);
});
let p3 = p2.then(function (oImg) {
console.log("2");
// console.log(oImg);
document.body.appendChild(oImg);
return loadImage(arr[2]);
}, function (msg) {
console.log(msg);
});
p3.then(function (oImg) {
console.log("3");
// console.log(oImg);
document.body.appendChild(oImg);
}, function (msg) {
console.log(msg);
});
*/
// 简化之后的代码
loadImage(arr[0]).then(function (oImg) {
// console.log(oImg);
console.log("1");
document.body.appendChild(oImg);
return loadImage(arr[1]);
}).then(function (oImg) {
console.log("2");
// console.log(oImg);
document.body.appendChild(oImg);
return loadImage(arr[2]);
}).then(function (oImg) {
console.log("3");
// console.log(oImg);
document.body.appendChild(oImg);
}).catch(function (msg) {
console.log(msg);
});
</script>
</body>
</html>
