前端JS进阶三（ES6-Promise语法）

Callback Hell

  function loadImg(src,callback,fail){
      var img = document.createElement('img')
      img.onload = function(){   //图片加载成功
          callback(img)
      }
      img.onerror = function(){   //图片加载失败
          fail()
      }
      img.src = src
  }

  var src = 'http://www.imooc.com/static/img/index/logo_new.png'
  loadImg(src,function(img){
      console.log(img.width)
  },function(){
      console.log('failed')
  })

Promise语法

  function loadImg(src){
      const promise = new Promise (function (resolve,reject){
          var img = document.createElement('img')
          img.onload = function(){
              resolve(img)
          }
          img.onerror = function(){
              reject()
          }
          img.src = src
      })
      return promise
  }

  var src = 'https://www.imooc.com/static/img/index/logo_new.png'
  var result = loadImg(src)
  result.then(function(img){
      console.log(img.width)
  },function(){
      console.log('failed')
  })
  result.then(function(img){
      console.log(img.height)
  },function(){
      console.log('failed')
  })

总结

• new Promise实例，而且要return
• new Promise 时要传入函数，函数有 resolve reject 两个参数
• 成功时执行 resolve() 失败时执行 reject()
• then 监听结果