013-Promise（异步编程的解决方案,更是解决无穷回调）

/**
 * Promise（异步编程的解决方案,更是解决无穷回调）
 */

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


{ //Promise()基础定义
  let ajax=function(){
      console.log('执行2');
      /**
       * resolve()用.then()去接    表示执行下一步操作
       * rejuct() 用.catch()去接   表示终止操作
       */
      return new Promise(function(resolve,reject){
          setTimeout(function () {
              resolve()
          }, 1000);
      })
  };

  //调用
  ajax().then(function(){
      console.log('promise','timeout2');
  })
}


{ //Promise()多步骤操作
  let ajax=function(){
      console.log('执行3');
      return new Promise(function(resolve,reject){
          setTimeout(function () {
              resolve()
          }, 1000);
      })
  };

  ajax().then(function(){
      return new Promise(function(resolve,reject){
          setTimeout(function () {
              resolve()
          }, 2000);
      });
  }).then(function(){
      console.log('timeout3');
      //... 无限下一步
  })
}


{ //.catch()捕获异常错误
  let ajax=function(num){
      console.log('执行4');
      return new Promise(function(resolve,reject){
          if(num>5){
              resolve()
          }else{
              //抛出错误(使用.catch()去接)
              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);
  });
}


/* Promise()高级实践 ***********************************************************************/
{ // 所有图片加载完再添加到页面
  function loadImg(src){
      return new Promise((resolve,reject)=>{
          let img=document.createElement('img');
          img.src=src;
          //图片加载完成（执行下一步）
          img.οnlοad=function(){
              resolve(img);
          }
          //图片加载失败（抛出错误）
          img.οnerrοr=function(err){
              reject(err);
          }
      })
  }

  //展示图片方法
  function showImgs(imgs){
      imgs.forEach(function(img){
         document.body.appendChild(img);
      })
  }

  /**
   * Promise高级用法
   * Promise.all();
   *    表示把多个Promise实例当做一个Promise实例
   *    当all数组中的Promise实例对象都加载完成之后，才会触发新的.then()实例对象
   */
  Promise.all([
      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);
}


{ // 有一个图片加载完就添加到页面
  function loadImg(src){
      return new Promise((resolve,reject)=>{
          let img=document.createElement('img');
          img.src=src;
          img.οnlοad=function(){
              resolve(img);
          }
          img.οnerrοr=function(err){
              reject(err);
          }
      })
  }

  function showImgs(img){
      let p=document.createElement('p');
      p.appendChild(img);
      document.body.appendChild(p)
  }

  /**
   * Promise高级用法
   * Promise.race();
   *    只要有一个加载完成就执行 .then();
   */
  Promise.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)

}