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

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

接口调用方式

原生ajax
基于jQuery的ajax
fetch
axios
异步

JavaScript的执行环境是「单线程」
所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程
异步模式可以一起执行多个任务
JS中常见的异步调用
定时任何
ajax
事件函数
promise

主要解决异步深层嵌套的问题
promise 提供了简洁的API 使得异步操作更加容易

[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>

基于Promise发送Ajax请求

[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>

帐号		自动登录	找回密码
密码			加入黑马

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

0 个回复

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