Promise

Promise翻译为承诺，它表示一个预计会在未来完成的异步操作。

promise有三个状态[PromiseState]：pending(进行中)   fulfilled(已成功)   rejected(已失败)

promise的状态一旦发生改变会一直保持这个状态就不会再发生变化，这时候就会触发promise的then方法，then方法中有两个回调函数，一个是成功后的回调resolve，一个是失败后的回调reject
 

promise接受一个回调函数作为参数，回调函数有两个参数resolve代表成功后的回调，rejiect代表失败后的回调。

  let p = new Promise((resolve, reject) => {
    if (true) {
      resolve(123) // 在promise完成后 成功 后调用 并把123返回出去
    } else {
      reject(456) // 在promise完成后 失败 后调用 并把456返回出去
    }
  })

 Promise上的方法

 

• then方法

  
  /**
     * then方法
     * then方法中有两个回到函数  1.成功后的回到  2. 失败后悔的回调
     * 当promise执行结束就会触发then方法
     * 如果promise的状态是resolve的时候会触发then方法中的第一个函数
     * 如果promise的状态是reject的时候会触发then方法中的第二个函数
     */
    p.then(res => {
      console.log(res); //promise的状态是成功状态fulfilled 所有返回 123
    }, err => {
      console.log(err) // promise的状态是失败状态rejected 就会返回 456
  
  

•  catch方法

  
  /**
     * catch 方法
     * 错误捕获
     * 当promise报错的时候 catch方法会捕获到错误 他也会捕获到then方法中的错误
     */
    p.catch(err => {
      console.log(err)
    })

• finally方法

  
  /**
     * finally 方法
     * 不管promise执行成功还是失败  finally都会执行
     */
    p.finally(() => {
      console.log(1);
    })

   promise的API

• all 

• 接收的参数是一个数组，数组的每个参数都是一个promise对象，当全部的promise对象都返回结果时，all就会执行，返回所有promise的结果，如果其中有一个失败，就返回失败。

•   let box = document.getElementById('box')
      let src1 = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg"
      let src2 = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474266791,210202337&fm=26&gp=0.jpg"
      let src3 = "https://img2.baidu.com/it/u=142535408,4047253383&fm=26&fmt=auto&gp=0.jpg"
      function getImg(src) {
          let img = document.createElement('img')
          img.src = src
          return new Promise((resolve, reject) => {
              img.onload = function () {
                  resolve(img)
              }
              img.onerror = function () {
                  reject('警告警告')
  
              }
  
          }
          )
      }
     let pAll =Promise.all([getImg(src1), getImg(src2), getImg(src3)])
      pAll.then(res => {//当全部加载成功时才会渲染所有图片
          console.log(res);
          res.forEach(item=>{
              box.append(item)
          })
      })

• race

• 接收的参数也是一个数组，数组的每个参数都是一个promise对象，和all不同的是，race是哪个promise先得到结果就返回谁，不管是成功还是失败。

•   let box = document.getElementById('box')
      let src1 = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg"
      let src2 = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474266791,210202337&fm=26&gp=0.jpg"
      let src3 = "https://img2.baidu.com/it/u=142535408,4047253383&fm=26&fmt=auto&gp=0.jpg"
      function getImg(src) {
          let img = document.createElement('img')
          img.src = src
          return new Promise((resolve, reject) => {
              img.onload = function () {
                  resolve(img)
              }
              img.onerror = function () {
                  reject('警告警告')
  
              }
  
          }
          )
      }
  
      let timeImg = new Promise((resolve, reject) => {
  
          setTimeout(() => {
              resolve('图片加载失败')
          }, 1000);
      })
   
  
      let pRaces = Promise.race([getImg(src1), timeImg])
      pRaces.then(res => {//超过一秒图片还没加载完成就渲染图片加载失败
          console.log(res);
          box.append(res)
      })