Vue学习笔记（2）前后端接口调用

前后端交互

前后端交互模式

• 接口调用方式
  • 原生ajax
  • 基于JQuery的ajax
  • fetch
  • axios

传统形式的URL：协议（http，https）+host（www.baodu.com）+端口（80）+路径（/admin/getBlankTable）+query（查询参数?username=admin&age=12）+fragment（锚点，定位页面的某个位置

http://www.tradition.com/admin/getBlankTable?username=admin&age=12#chapter

Restful形式的URL：

127.0.0.1:8080/books GET

127.0.0.1:8080/books POST

127.0.0.1:8080/book/123 PUT

127.0.0.1:8080/book/123 DELETE

Promise

异步调用

多次异步调用的结果无法确定

异步调用结果如果存在依赖需要嵌套

Promise概述

优点：

1. 可以避免多层异步调用嵌套问题（回调地狱）

2. 提供简介的API，控制异步更加容易

Promise基本用法

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

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

var promise=new Promise(function (resolve, reject) {
   
    setTimeout(function () {
   
        var flag=true;
        if(flag){
   
            resolve('hello');
        }else{
   
            reject('出错了');
        }
    },1000);
});
promise.then(function (data) {
   
    //从resolve得到正常结果
    console.log(data);
},function (info) {
   
    //从reject得到错误信息
    console.log(info);
})

reslove：成功

reject：失败

基于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('127.0.0.1:8081/vue/test')
    //   .then(function(data){
   
    //     console.log(data);
    //   },function(info){
   
    //     console.log(info)
    //   });
    // ============================
    // 发送多个ajax请求并且保证顺序
    queryData('127.0.0.1:8081/vue/test')
      .then(function(