es6 promise实际运用

分享一些promise的应用

es3/es5 以往异步调用写法【图片只是个demo】

function loadImg(src,callback,fail){
  var img=document.createElement('img');
  img.onload=function(){
    console.log(img)
    callback(img)
  }
  img.onerror=function(){
    fail()
  }
  img.src=src
}
  var src='https://avatars3.githubusercontent.com/u/8706879?s=40&v=4';
  loadImg(src,function(img){
    console.log(img.width)
  },function(){
    console.log('error')
  })

es6写法

function loadImg(src){
  const promise=new Promise(function(resolve,reject){
  var img=document.createElement('img');
  // throw new Error('aaaa')
  img.onload=function(){
    resolve(img)
  }
  img.onerror=function(){
    reject('图片加载失败')
  }
  img.src=src
  })
  return promise
}
 var src='https://avatars3.githubusercontent.com/u/8706879?s=40&v=4';
 var result=loadImg(src);
 result.then(function(img){
   console.log(1,img.width)
   return img
 }).then(function(img){
  console.log(2,img.height)
}).catch(function(ex){
  console.log(ex)
})