[JavaScript知识库]Promise.all加载多张图片

需求

使用Promise.all加载所有图片
只要有一张图片加载失败，所有图片不显示

html?

  <div id="imgBox"></div>

js

    /**
     * 使用Promise.all加载所有图片
     * 只要有一张图片加载失败，所有图片不显示
     */
      let urls = [
        "1.png",
        "2.png",
        "3.png",
      ];
      function loadImg(url) {
        return new Promise((resolve, reject) => {
          /**
           * 图片加载成功 resolve
           * 图片加载失败 reject
           */
          let pic = new Image
          pic.src = url
          pic.onload = function () {
            resolve("加载成功")
          }
          pic.onerror = function () {
            reject("加载失败")
          }
        });
      }
      // 创建promiseAll数组
      let promiseArr = []
      urls.forEach(item => {
        promiseArr.push(loadImg(item))
      })
      Promise.all(promiseArr)
      .then(value =>{
        for (let i = 0, len = urls.length; i < len; i++) {
          let newNode = document.createElement('img')
          newNode.src = urls[i]
          document.getElementById('imgBox').appendChild(newNode)
        }
        console.log(value, "所有图片加载成功");
      })
      .catch(err => {
        console.log(err, "有图片加载失败");
      })