ES6知识点整理——Promise

Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。简单点说，它就是用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者停止后续操作。

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

{
  let ajax=function(){
    console.log('执行2');
    return new Promise(function(resolve,reject){
      setTimeout(function () {
        resolve()
      }, 1000);
    })
  };

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

其中，Promise中的参数executor是一个执行器函数，它有两个参数resolve和reject。它内部通常有一些异步操作，如果异步操作成功，则可以调用resolve()来将该实例的状态置为fulfilled，即已完成的触发then()方法，如果一旦失败，可以调用reject()来将该实例的状态置为rejected，即失败的触发catch()方法。

Promise对象含有then方法，then()调用后返回一个Promise对象，意味着实例化后的Promise对象可以进行链式调用（进行下一步），而且这个then()方法可以接收两个函数，一个是处理成功后的函数，一个是处理错误结果的函数。

{
  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');
  })
}
{
  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);
  });
}

atch()方法和then()方法一样，都会返回一个新的Promise对象，它主要用于捕获异步操作时出现的异常。因此，我们通常省略then()方法的第二个参数，把错误处理控制权转交给其后面的catch()函数

Promise.all()

Promise.all()接收一个参数，它必须是可以迭代的，比如数组。

它通常用来处理一些并发的异步操作，即它们的结果互不干扰，但是又需要异步执行。它最终只有两种状态：成功或者失败。

它的状态受参数内各个值的状态影响，即里面状态全部为fulfilled时，它才会变成fulfilled，否则变成rejected。

成功调用后返回一个数组，数组的值是有序的，即按照传入参数的数组的值操作后返回的结果

{
  //所有图片加载完再添加到页面。当三个promise实例加载完之后才会触发promise.all()的then()
  function loadImg(src){
    return new Promise((resolve,reject)=>{
      let img=document.createELement('img');
      img.src=src;
      img.onload=function(){
        resolve();
      }
      img.onerror=function(err){
        reject(err);
      }
    })
  }
  function showImgs(imgs){
    imgs.forEach(function(img){
      document.body.appenchild(img)
    })
  }
  Promise.all([
    loadImg("http:")
    loadImg("http:")
    loadImg("http:")
  ]).then(showImgs)
}

Promise.race()

romise.race()和Promise.all()类似，都接收一个可以迭代的参数，但是不同之处是Promise.race()的状态变化不是全部受参数内的状态影响，一旦参数内有一个值的状态发生的改变，那么该Promise的状态就是改变的状态。就跟race单词的字面意思一样，谁跑的快谁赢。

{
  //所一个图片加载完就添加到页面
  function loadImg(src){
    return new Promise((resolve,reject)=>{
      let img=document.createELement('img');
      img.src=src;
      img.onload=function(){
        resolve();
      }
      img.onerror=function(err){
        reject(err);
      }
    })
  }
  function showImgs(img){
    let p=document.createELement('p');
    p.appenchild(img);
    document.body.appenchild(p)
  }
  Promise.race([
      loadImg("http:")
      loadImg("http:")
      loadImg("http:")
    ]).then(showImgs)
}