ES6（十三）Promise

Posted 2022-11-30 ronle

Promise.all  所有状态都改变才执行

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

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 showImg (imgs) 
  imgs.forEach(function (img) 
    document.body.appendChild(img)
  )

Promise.all([
  loadImg(‘https://img.zcool.cn/community/016e155d8902e1a8012060be996ed7.jpg@1380w‘),
  loadImg(‘https://img.zcool.cn/community/016efc5d8902c1a8012060be29ed58.jpg@1380w‘),
  loadImg(‘https://img.zcool.cn/community/014cd15d8902d6a801211d53c730ea.jpg@1380w‘)
]).then(showImg)

什么时候可以使用Promise.all？

几个异步操作是强相关的，后续步骤必须依赖这几个步骤全部成功才能进行。比如假设一个支付操作需要用户账户有余额，并且商品有库存，才能进行下一步操作，那么我们也许需要Promise.all来处理



Promise.race  有一个状态改变

Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态，其他的结果都不执行了

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 showImg (img) 
  let p = document.createElement(‘p‘)
  p.appendChild(img)
  document.body.appendChild(p)

Promise.race([
  loadImg(‘https://img.zcool.cn/community/016e155d8902e1a8012060be996ed7.jpg@1380w‘),
  loadImg(‘https://img.zcool.cn/community/016efc5d8902c1a8012060be29ed58.jpg@1380w‘),
  loadImg(‘https://img.zcool.cn/community/014cd15d8902d6a801211d53c730ea.jpg@1380w‘)
]).then(showImg)