Promise的高级用法

最新推荐文章于 2024-07-02 08:35:50 发布

quan!!!

最新推荐文章于 2024-07-02 08:35:50 发布

阅读量965

点赞数 1

分类专栏： es6 文章标签： es6

本文链接：https://blog.csdn.net/qq_40816360/article/details/85936885

版权

es6 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Promise.all()
所有的promise实例都resolve后再执行then
案例：所有图片加载完成后再加入到页面

{
  function loadImg(src) {
    return new Promise((resolve, reject) => {
      let img = document.createElement('img');
      img.src = src;
      img.onload = function() {
        resolve(img);
      }
      img.onerror = function(err) {
        reject(err)
      }
    })
  }

  function showImgs(imgs) {
    imgs.forEach(img => {
      document.body.appendChild(img)
    })
  }

  Promise.all([
    loadImg('http://img4.imgtn.bdimg.com/it/u=1020383179,3062284491&fm=26&gp=0.jpg'),
    loadImg('http://img1.imgtn.bdimg.com/it/u=1992085767,102835282&fm=26&gp=0.jpg'),
    loadImg('http://img4.imgtn.bdimg.com/it/u=967395617,3601302195&fm=26&gp=0.jpg')
  ]).then(showImgs)
}

Promise.race()
所有实例中，只要有一个实例完成了就可以then

{
  function loadImg(src) {
    return new Promise((resolve, reject) => {
      let img = document.createElement('img');
      img.src = src;
      img.onload = function() {
        resolve(img);
      }
      img.onerror = function(err) {
        reject(err)
      }
    })
  }

  function showImgs(imgs) {
    imgs.forEach(img => {
      document.body.appendChild(img)
    })
  }

  Promise.race([
    loadImg('http://img4.imgtn.bdimg.com/it/u=1020383179,3062284491&fm=26&gp=0.jpg'),
    loadImg('http://img1.imgtn.bdimg.com/it/u=1992085767,102835282&fm=26&gp=0.jpg'),
    loadImg('http://img4.imgtn.bdimg.com/it/u=967395617,3601302195&fm=26&gp=0.jpg')
  ]).then(showImgs)
}