es6-Promise

Promise是一个构造函数，接受2个参数，resolve，reject，一个是异步操作成功回调函数一个异步操作失败回调函数

一个典型的传统回调函数

{
  let ajax = callback => {
    console.log('执行...')
    setTimeout(() => {
      callback && callback.call()
    }, 1000)
  }

  ajax(() => {
    console.log('timeout')
  })
}

es6的回调函数

{
  let ajax = (name) => {
    console.log('执行...')
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(name)
      }, 1000)
    })
  }
  ajax('timeout').then(res => {
    console.log(res)
  })
}

Promise链式操作then，catch

{
  let ajax = num => {
    return new Promise((resolve, reject) => {
      if (num > 0) {
        resolve(num)
      } else {
        throw new Error('error')
      }
    })
  }
  ajax(1).then(r => {
    console.log(r)
  }).catch(err => {
    console.log(err)
  })
  ajax(-1).then(r => {
    console.log(r)
  }).catch(err => {
    console.log(err)
  })
}

这是1个非常粗暴异常情况的代码。当小与0时，异常。大于0时正常。可以直观的描述Promise的链式操作

还有2个非常强大的方法all 和race

all是所有异步操作执行结束之后才开始执行回调函数，非常典型的页面图片加载 ，图片加载完毕在页面输出结果

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

  function showImg (imgs) {
    imgs.forEach(item => {
      console.log(item) 
      document.body.appendChild(item)
    })
  }

  Promise.all([
    loadImg('http://pic.baike.soso.com/ugc/baikepic2/14871/20170111115043-89387261.jpg/0'),
    loadImg('http://pic9.photophoto.cn/20081105/0036036315103765_b.jpg'),
    loadImg('http://tpic2.eastlady.cn/uploads/tu/201710/161/S1.jpg')
  ]
  ).then(res => {
    showImg(res)
  })
}

执行结束后控制台会输出 3个图片地址

race 是谁跑的快那么执行谁的回调函数跟all不一样

{
  let loadImg = imgSrc => {
    return new Promise((resolve, reject) => {
      let img = document.createElement('img')
      img.src = imgSrc
      img.onload = () => {
        resolve(img)
      }
    })
  }
  let timeout = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('图片请求超时')
      }, 5000)
    })
  }
  Promise.race([
    loadImg('http://tpic2.eastlady.cn/uploads/tu/201710/161/S1.jpg'),
    timeout()
  ]).then(res => {
    console.log(res)
  })
}

这是一个图片异步请求，如果5秒超时，那么返回”图片请求超时“