Promise异步编程

Promise异步编程

 一. Promise用法

1. Promise基本用法

实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务

resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

在调用then时可以只传入正常情况函数处理，不传入异常情况函数，即只处理成功情况

 /*  
   我们使用new来构建一个Promise  Promise的构造函数接收一个参数，是函数，并且传入两个参数：
   resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数    */
    var p = new Promise(function(resolve, reject){
      //2. 这里用于实现异步任务  setTimeout
      setTimeout(function(){
        var flag = false;
        if(flag) {
          //3. 正常情况
          resolve('hello'); 
       }else{
          //4. 异常情况
          reject('出错了');
        }
      }, 100);
    });
    //  5 Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数 
    //  在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
    p.then(function(data){
    //从resolve得到正常结果
      console.log(data)
    },function(info){ 
    //从reject得到错误信息
     console.log(info)
    }); 

/*
      基于Promise发送Ajax请求
    */
    function queryData(url) {
      var p = 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);
      });
      return p;
    }
    // 普通情况
    // queryData('http://localhost:3000/data')
    //   .then(function(data){
    //     console.log(data);
    //   },function(info){
    //     console.log(info)
    //   });
    // ============================
    // 发送多个ajax请求并且保证顺序
    // 如果上一个then返回值return是一个普通对象。下一个链式then中的参数就是这个普通对象，这个then的调用者是系统自动创建的promise对象用于保证链式调用
　  // 如果返回return的是promise对象，那么下一个then处理的就是上一个then返回的promise对象的方法
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });

 2. 异常情况除了可以在then传入两个函数，还可以改为.catch去处理，效果一样

　　function foo() {
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          // resolve(123);
          reject('error');
        }, 100);
      })
    }
    foo()
      .then(function(data){
       // 得到异步任务正确的结果 
        console.log(data)
      })
      .catch(function(data){
       // 获取异常信息
        console.log(data)
      })
      .finally(function(){
       // 成功与否都会执行（不是正式标准） 
        console.log('finished')
      });

 3. 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');

    // all表示所有异步成功执行
    //  all 中的参数  [p1,p2,p3]   和 返回的结果result是数组一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"] 
    // Promise.all([p1,p2,p3]).then(function(result){
    //   console.log(result)
    // })

    // race最快的一个异步成功执行，其他不管
    // 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。 
    Promise.race([p1,p2,p3]).then(function(result){
      console.log(result)
    })

二. Fetch接口用法（与服务端交互Get，Post）

三. Axios接口用法（与服务端交互Get，Post）

1. 此接口使用需要导入对应的js文件

四.  async/await 让异步代码看起来、表现起来更像同步代码

 1. await关键字只能在使用async定义的函数中使用

 2. await后面可以直接跟一个 Promise实例对象 

 3. 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程 

 4. 添加await之后 当前的await 返回结果之后才会执行后面的代码 

    async function queryData() {
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
    queryData().then(function(data){
      console.log(data)
    })