(二)18.Promise19-08-15

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

打印结果：
执行
timeout1

{
  //和上面同一个案例 用promise写法   promise写法好处 可读性可维护性比较好
  let ajax=function () {
    console.log('执行2');
    //返回一个Promise实例
    return new Promise(function (resolve,reject) {
      //resolve要执行下一步的操作  reject终止当前操作
      setTimeout(function () {
        resolve()

      },1000);

    })
  };
  //ajax返回promise实例，这个实例要用.then执行下一步，then的参数体就是下一步，
  // 第一个function对应的resolve 第二个function对应的reject,不需要可以不写
  ajax().then(function () {
    console.log('promise','timeout2');
  },function (){})
}

打印结果：
执行2
promise timeout2

• Promise多步调用

{
  //Promise多步调用
  let ajax=function () {
    console.log('执行3');
    //返回一个Promise实例
    return new Promise(function (resolve,reject) {
      //resolve要执行下一步的操作  reject终止当前操作
      setTimeout(function () {
        resolve()

      },1000);

    })
  };

  ajax()
    .then(function () {
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        resolve()
      },2000);
    })
      .then(function () {
      console.log('timeout3');
    })
  })

}

打印结果：
执行3
timeout3

• Promise 捕获异常错误

{
  //捕获异常错误
  let ajax=function (num) {
    console.log('执行4');
    return new Promise(function (resolve, reject) {
      if (num>5){
        resolve()
      }else{
        throw new Error('出错了')
      }
    })
  }
   ajax(3).then(function () {
     console.log('log',3);
   }).catch(function (err) {
     console.log('catch',err);
   })
}

打印结果：
执行4
catch Error: 出错了
at new Promise (<anonymous>)
at index.min.js:1
at Object.<anonymous> (index.min.js:1)
at r (index.min.js:1)
at Object.<anonymous> (index.min.js:1)
at r (index.min.js:1)
at Object.<anonymous> (index.min.js:1)
at r (index.min.js:1)
at index.min.js:1

• 所有图片加载成功后 再加载到页面

{
  //所有图都加载成功后 再加载到页面
  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([
    loadImg('http://wx4.sinaimg.cn/orj360/95c2d66dgy1g5zap2hq5rj20j60j6gnj.jpg'),
    loadImg('http://wx4.sinaimg.cn/orj360/95c2d66dgy1g5zap2lko3j20j60j6myx.jpg'),
    loadImg('http://wx3.sinaimg.cn/orj360/95c2d66dgy1g5zap2if2rj20j60j6dhi.jpg')
  ]).then(showImgs)
}

• 一个图片加载完成就加载在页面上 其他终止

{
  //一个图都加载成功后 就加载到页面
  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([
    loadImg('http://wx4.sinaimg.cn/orj360/95c2d66dgy1g5zap2hq5rj20j60j6gnj.jpg'),
    loadImg('http://wx4.sinaimg.cn/orj360/95c2d66dgy1g5zap2lko3j20j60j6myx.jpg'),
    loadImg('http://wx3.sinaimg.cn/orj360/95c2d66dgy1g5zap2if2rj20j60j6dhi.jpg')
  ]).then(showImgs)
}