Vue全家桶-前后端交互

1.前后端交互模式
1.1 接口调用方式
* 原生ajax
* 基于jQuery的ajax
* fetch API
* axios
1.2 URL 地址格式
1.传统形式的URL
格式: scheme://host:port/path?query#fragment
协议://域名:端口/路径?参数#锚点(哈希Hash)
2.Restful形式的URL
HTTP请求方式
GET 查询
POST 添加
PUT 修改
DELETE 删除
符合规则的URL地址
http://www.hello.com/books/123

2.Promise的相关概念和用法
2.1 异步调用
* 异步效果分析
1.定时任务
2.Ajax
3.事件函数
* 多次异步调用的依赖分析
1.多次异步调用的结果顺序的不确定
2.异步调用的结果如果存在依赖需要嵌套
2.2 Promise 概述
Promise 是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息.

    使用 Promise主要有以下好处:
        * 可以避免多层异步调用嵌套问题(回调地狱)
        * Promise 对象提供了简洁的API,使得控制异步操作更加容易
2.3 Promise 基本用法       
    实例化 Promise 对象,构造函数中传递函数,该函数中用于处理异步函数
    resolve 和 reject 两个参数用于处理成功和失败两种情况,并通过 p.then获取处理结果
        
        var p = new Promise(function(resolve,reject){
           // 成功时调用 resolve()
           // 失败时调用 reject()
        });
        p.then(function(ret){
           // 从 resolve 得到正常结果
        }),function(ret){
           // 从 reject 得到错误信息
        }
2.4 基于Promise处理Ajax请求
    1.处理原生Ajax
        function queryData(url){
            let p = Promise(function(resolve,reject){
                let xhr = new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if(xhr.readyState != 4) return;
                    if(xhr.readyState == 4 && xhr.status == 200){
                        resolve(xhr.response)
                    }else{
                        reject('服务器错误)
                    }
                };
                xhr.open('get',url);
                xhr.send(null);
            });
            return p;
        };
    2. 发送多次 ajax 请求
        queryData(){
            .then(function(data){
                return queryData();
            })
            .then(function(data){
                return queryData();
            })
            .then(function(data){
                return queryData();
            })
        };
2.5 then 参数中的函数返回值
  1. 返回 Promise 实例对象
    * 返回的该实例对象会调用下一个then
  2. 返回普通值
    * 返回的普通值会直接传递给下一个then,通过then 参数中函数的参数接收该值
2.6 Promise 常用的 API      
  1. 实例方法 
     * p.then() 得到异步任务的正确结果
     * p.catch() 获取异常信息
     * p.finally() 成功与否都会执行(尚且不是正式标准)
  2.对象方法
     * Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果
        Promise.all([p1,p2,p3]).then((result)=>{
            console.log(result)
        });
     * Promise.race() 并发处理多个异步任务,只要有一个任务完成就能得到结果
         Promise.race([p1,p2,p3]).then((result)=>{
             console.log(result)
         });

3.使用fetch进行接口调用
3.1 fetch 概述
1.基本特性
可以看做是xhr的升级版
基于Promise实现
2.语法结构
fetch(url).then(fn2)
.then(fn3)
…
.catch(fn)
3.2 fetch 的基本用法
fetch(’/abc’).then(data=>{
return data.text();
// text() 方法属于fetch API的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
}).then(ret=>{
// 注意这里得到的才是最终的数据
console.log(ret)
});
3.3 fetch请求参数
1.常用配置选项
* method(String):HTTP请求方式,默认为GET(GET. POST. PUT. DELETE)
* body(String):HTTP请求参数
* headers(Object):HTTP的请求头,默认为{}
2.GET请求方式的参数传递
// 传统方式
fetch(’/abc?id=123’).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret)
});
4.使用axios进行接口调用

5.使用async/await 方式调用接口

6.基于后台接口实现案例