ES6总结 14- Promise

ES6学习总结是自己在学习过程中的总结，记笔记就是为了督促自己学习和复习，好记性不如烂笔头。如果有错误，感谢指出。

异步

a执行完在执行b...一通过回调，二是事件触发，三是异步；

es5中的传统ajax,abcd很多任务，回调方法不便于修改，阅读，编写

{
  // 基本定义
  let ajax=function(callback){
    console.log('执行');
    setTimeout(function () {
      callback&&callback.call()
    }, 1000);
  };
  ajax(function(){
    console.log('timeout1');
  })
}

Promise的作用

{
  let ajax=function(){
    console.log('执行2');
    return new Promise(function(resolve,reject){//resolve是成功之后执行的方法   reject是失败的时候执行的方法
      setTimeout(function () {
        resolve()
      }, 1000);
    })
  };

  ajax().then(function(){//通过then来捕捉 成功和失败的时候执行的方法
    console.log('promise','timeout2');//可读性高
  })
}　

Promise的基本用法-异常捕获

{
  let ajax=function(num){
    console.log('执行4');
    return new Promise(function(resolve,reject){
      if(num>5){
        resolve()
      }else{
        throw new Error('出错了')
      }
    })
  }

  ajax(6).then(function(){
    console.log('log',6);
  }).catch(function(err){
    console.log('catch',err);
  });

  ajax(3).then(function(){
    console.log('log',3);
  }).catch(function(err){
    console.log('catch',err);
  });
}
//执行4 log6 出错了

Promise的高级用法

头条 fade流，三张图都加载完在放在页面上，用户体验好

{
  // 所有图片加载完再添加到页面
  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 showImgs(imgs){
    imgs.forEach(function(img){
      document.body.appendChild(img);
    })
  }

  Promise.all([  //把多个promise实例当做一个实例，all返回一个promise实例
    loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
    loadImg('http://i4.buimg.com/567751/2b07ee25b08930ba.png'),
    loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png')
  ]).then(showImgs)

}

有一个图片加载完就添加到页面,先到先得，有一个回来就race执行

{
  // 有一个图片加载完就添加到页面
  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 showImgs(img){
    let p=document.createElement('p');
    p.appendChild(img);
    document.body.appendChild(p)
  }

  Promise.race([  //先到先得，有一个回来就race执行
    loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
    loadImg('http://i4.buimg.com/567751/2b07ee25b08930ba.png'),
    loadImg('http://i2.muimg.com/567751/5eb8190d6b2a1c9c.png')
  ]).then(showImgs)

}