ES6的Promise语法初使用-CFANZ编程社区

Promise是一种异步编程的解决方案；（个人理解：譬如说一个需求需要两个请求将结果返回后才能处理，这时用Promise就很方便）

我们可以用setTimeout来模拟网络请求

setTimeout(()=>{
  console.log("使用setTimeout来模拟网络请求");
},1000)

意义：1秒钟后回调箭头函数，并执行箭头函数的内容；

Promise详解简介：
Promise相当于一个类，调用时需要先初始化成对象；该对象的参数是一个函数，通常是箭头函数，而该函数中的参数也是函数，通常是resolve和reject函数；resolve函数是请求成功时调用的函数，reject是请求失败时处理的函数；resolve调用的函数需要用then回调函数进行处理，reject调用的函数需要用catch函数进行回调处理；
简单实例

new Promise((resolve,reject)=>{
    setTimeout((data)=>{
      //console.log("success"); 调用成功，但是不在这个地方进行处理
      resolve('promise');
      reject('error message');
    },10000)
  }).then((data)=>{
    console.log(data); //调用成功，通过resolve函数在这个地方进行处理
  }).catch((err)=>{
    console.log(err); //调用失败，通过reject函数在这个地方进行处理
  })

Promise是链式编程，简单实例

new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve
    },1000)
  }).then(()=>{
    console.log('处理第一层返回的结果');
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve
      },1000)
    })
  }).then(()=>{
    console.log(‘处理第二层返回的结果’)
    return new Promise()......
  })

注意：此时一定要注意，处理的回调函数是处于同一层级；
什么情况下会用到Promise？一般情况下是有异步操作时，使用Promise对这个异步操作进行封装；
//new ->构造函数(1.保存了一些状态信息 2.执行传入的参数)
//在执行传入的回调函数时，会传入两个参数，resolve，reject。其本身又是函数
Promise的三种状态：
   异步操作之后会有三种状态：
       pending:等待状态，比如止住网络请求，或者定时器没有到时间；
       fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
       reject:拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()
使用Promise的简单方法实例：

new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve('aaa')
    },1000)
  }).then((res)=>{
    //自己处理的代码
    console.log(res,'第一层的处理代码')
    //对结果进行处理的代码
    return Promise.resolve(res+'111')
    //或者是
    return res+'111';
    //return Promise.reject('error message')
    //throw 'error message'
  }).then((res)=>{
    console.log(res,'第二层的处理代码')
    //对结果进行处理的代码
    return Promise.resolve(res+'222')
    //或者是
    return res+'222';
  }).catch((err)=>{
    console.log(err);
  })

异步请求的封装
  在没有使用promise时：
    let isResult1 = false;
    let isResult2 = false;
    $ajax({
      url:'url1',
      success:function(){
        console.log('结果1')
        isResult1 = true
        handleResult()
      }
    })
    $ajax({
      url:'url2',
      success:function(){
        console.log('结果2')
        isResult2 = true
        handleResult()
      }
    })
    function handleResult(){
      if(isResult1 && isResult2){
        //开始处理请求
      }
    }
  当我们使用了Promise后
  Promise.all([
    new Promise((resolve,reject)=>{
        $ajax({
        url:'url1',
        success:function(){
          console.log('结果1')
          isResult1 = true
          handleResult()
        }
      })
    })
    new Promise((resolve,reject)=>{
        $ajax({
        url:'url2',
        success:function(){
          console.log('结果2')
          isResult2 = true
          handleResult()
        }
      })
    })
  ]).then((results)=>{
    result[0]  //就是ajax1请求处理的结果
    result[1]  //就是ajax2请求处理的结果
  })
简单实例：
  Promise.all([
    new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve({name:'why',age:18})
      },2000)
    })
    new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve({name:'kobe',age:41});
      },1000)
    })
  ]).then(results=>{
    console.log(results)
  })