Vue学习--前后端交互

接口调用方式

• 原生ajax
• 基于jQuery的ajax
• fetch
• axios

异步

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

promise

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

 
  <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请求

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

Promise 基本API

实例方法

.then()

• 得到异步任务正确的结果

.catch()

• 获取异常信息

.finally()

• 成功与否都会执行（不是正式标准）

  
  <script type="text/javascript">
    /*
      Promise常用API-实例方法
    */
    // console.dir(Promise);
    function foo() {
    
      return