承诺,是异步编程的一种解决方案.所谓Promise，它本身就是一个容器，里面保存着异步操作的结果，它有三种状态:
pending(进行中)resolved(成功)rejected(失败 Promise.all() //实现当所有的图片全部加载完毕，才显示在页面中Promise.race() //实现谁先加载完毕就显示谁获取容器结果:.then()//兑现承诺的回调||.catch()//拒绝承诺的回调 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p><button id="btn">加载</button></p> <div id="box1"> </div> <div id="box2"> <p>race方法 谁先加载完毕显示谁</p> </div> <div id="box3"> <p>当所有的图片全部加载完毕，才显示在页面中</p> </div> <script> var pics = [ "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7bc54a61b927dd8c54ddd39a0acf0254.jpg?w=632&h=340", "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/94c74e01afe50a86c3a87ff030b85781.jpg?w=632&h=340", "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340" ] function loadImg(url){ return new Promise((resolve,reject)=>{ var img = document.createElement("img"); img.src = url; img.style.width = "200px"; img.onload = function(){resolve(img)}; img.onerror = function(){reject(img)}; }) } //按钮加载 btn.onclick = function(){ loadImg(pics[0]) .then(res=>{ box1.appendChild(res); return loadImg(pics[1]); }) .then(res=>{ box1.appendChild(res); return loadImg(pics[2]); }) .then(res=>{ box1.appendChild(res); }) } //race加载 Promise.race([loadImg(pics[0]),loadImg(pics[1]),loadImg(pics[2])]) .then(res=>{ box2.appendChild(res); }) //all加载 Promise.all([loadImg(pics[0]),loadImg(pics[1]),loadImg(pics[2])]) .then(res=>{ for(img in res){ box3.appendChild(res[img]); } }) </script> </body> </html>