【郑州校区】前端笔记Vue项目第4天 1 - 黑马程序员技术交流社区

【郑州校区】前端笔记Vue项目第4天 1

[AppleScript] 纯文本查看 复制代码

<script type="text/javascript">



    /*



     1. Promise基本使用



           我们使用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){



      console.log(data)



    },function(info){



      console.log(info)



    });



  </script>

[AppleScript] 纯文本查看 复制代码

<script type="text/javascript">

    /*

      基于Promise发送Ajax请求

    */

    function queryData(url) {

     #   1.1 创建一个Promise实例

      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) {

            # 1.2 处理正常的情况

            resolve(xhr.responseText);

          }else{

            # 1.3 处理异常情况

            reject('服务器错误');

          }

        };

        xhr.open('get', url);

        xhr.send(null);

      });

      return p;

    }

    # 注意：  这里需要开启一个服务 

    # 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了

    queryData('http://localhost:3000/data')

      .then(function(data){

        console.log(data)

        #  1.4 想要继续链式编程下去 需要 return  

        return queryData('http://localhost:3000/data1');

      })

      .then(function(data){

        console.log(data);

        return queryData('http://localhost:3000/data2');

      })

      .then(function(data){

        console.log(data)

      });

  </script>