Promise用法总结

Promise是ES6的新特性,是异步编程的一种解决方案
从语法上说,Promise是一个对象,从它可以获取异步操作的消息,可以解决回调地狱(回调地狱嵌套回调函数)
Promise的含义:本身不是异步,是封装异步操作容器,统一异步的标准
Promise对象的特点:对象的状态不受外界影响,一旦状态改变，就不会再变，任何时候都可以得到这个结果
一.前引

1. js中的异步操作有哪些

ajax请求  
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){}
xhr.addEventListener('readystatechange',function(){})
浏览器事件
ele.onclick=function(){}
定时
setTime(function(){
},1000);

2.回调函数

函数的参数是另外一个函数
setTime(function(){
},1000);

二.Promise 的优缺点
优点：
1、将异步操作以同步操作的方式表达出来，避免层层嵌套回调函数
2、提供统一的操作接口，方便对异步操作的控制
缺点：
1、promise一旦建立，则不可取消
2、如果不设置回调函数，则会在promise内部抛出错误，不会反应到外部
3、当状态是pending是，无法判断当前状态（是异步刚刚开始执行还是即将完成了异步操作）
三.状态
1.pending 进行中,当异步操作执行中
2.resolve 操作成功状态
3.rejected 操作失败的状态
四.对原生ajax封装

  function aa(method='get',path='1.php'){
       return new Promise((f1,f2)=>{
           let request = new XMLHttpRequest();
           request.open(method,path);
           request.send();
           request.onreadystatechange=()=>{
               if(request.readyState ==4){
                   if(request.status ==200){
                       f1.call(null,request.responseText)
                   }else{
                       f2.call(undefined,request.status)
                   }
               }
           }
       })    
   }
    aa('get','1.php').then(function(da){
         console.log(da)
    }).then(function(da){
         aa('get','2.php').then(function(da){
             console.log(da)
         })
    })

五.Promise基本API
1.实例方法
1 .then() 得到异步任务正确的结果
2 .catch() 获取异常信息
3 .finally() 方法用于指定不管Promise对象最后状态如何,都会执行的操作
成功与否都会执行（不是正式标准）

 <script type="text/javascript">
    /*
      Promise常用API-实例方法
    */
    // console.dir(Promise);
    function foo() {
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          // resolve(123);
          reject('error');
        }, 100);
      })
    }
    // 两种写法是等效的
    foo()
      .then(function(data){
        # 得到异步任务正确的结果
        console.log(data)
      },function(data){
        # 获取异常信息
        console.log(data)
      })
      # 成功与否都会执行（不是正式标准） 
      .finally(function(){
        console.log('finished')
      });
  </script>

2.静态方法
1 .all()

• Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定

2 .race()

• Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数

<script type="text/javascript">
    /*
      Promise常用API-对象方法
    */
    // console.dir(Promise)
    function queryData(url) {
      return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
    }
    var p1 = queryData('http://localhost:3000/a1');
    var p2 = queryData('http://localhost:3000/a2');
    var p3 = queryData('http://localhost:3000/a3');
     Promise.all([p1,p2,p3]).then(function(result){
       //   all 中的参数  [p1,p2,p3]   和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
       console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
     })
    Promise.race([p1,p2,p3]).then(function(result){
      // 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。
      console.log(result) // "HELLO TOM"
    })
  </script>