关于vue.js:Vue调用接口的方式有哪些

原生 ajax
基于 jQuery 的 ajax
fetch
axios

异步

1.JavaScript 的执行环境是「单线程」

所谓单线程，是指 JS 引擎中负责解释和执行 JavaScript 代码的线程只有一个，也就是一次只能实现一项工作，这个工作执行完后能力执行下一个，它会「阻塞」其余工作。这个工作可称为主线程

2. 异步模式能够一起执行多个工作

3.JS 中常见的异步调用

定时任何
ajax
事件函数

次要解决异步深层嵌套的问题
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>

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

作者：蔚完待旭
链接：https://www.jianshu.com/p/bcc…
起源：简书
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

调用接口的形式

异步

promise

基于 Promise 发送 Ajax 申请