Vue基础——Vue前端交互

目标：
　　能够说出什么是前后端交互模式
　　能够说出Promise的相关概念和用法
　　能够使用fetch进行接口调用
　　能够使用axios进行接口调用
　　能够使用async/await方式调用接口
　　能够基于后台接口实现案例
目录：
　　前后端交互模式
　　Promise用法
　　接口调用-fetch用法
　　接口调用-axios用法
　　接口调用async/await用法
　　基于接口的案例

1、前后端交互模式
1.1、接口调用方式
　　原生Ajax
　　基于jQuery的Ajax
　　fetch
　　axios
1.2、URL地址格式
传统形式的URL
　　格式：schema://host:port/path?query#fragment
　　　　schema:协议。例如http、https、ftp等
　　　　host:域名或IP地址
　　　　port:端口，http默认端口80，可以省略
　　　　path:路径，例如/abc/a/b/c
　　　　query:查询参数，例如uname=lisi&age=12
　　　　fragment:锚点（哈希Hash），用于定位页面的某个位置
　　符合规则的URL:
　　　　http://www.baidu.com
　　　　http://www.baidu.com/java/web
　　　　http://www.baidu.com/java/web?flag=1
　　　　http://www.baidu.com/java/web?flag=1#function
Restful形式的URL
　　HTTP请求方式
　　　　GET 查询
　　　　POST 添加
　　　　PUT 修改
　　　　DELETE 删除
　　符合规则的URL地址
　　　　http://www.baidu.com/books GET
　　　　http://www.baidu.com/books POST
　　　　http://www.baidu.com/books/123 PUT
　　　　http://www.baidu.com/books/123 DELETE

2、Promise用法
2.1、异步调用
异步调用效果分析
　　定时任务
　　Ajax
　　事件函数
多次异步调用的依赖分析
　　多次调用的结果顺序不确定
　　异步调用结果如果存在依赖需要嵌套
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请求
处理原生Ajax

function queryData(){
    return new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState != 4) return;
            if(xhr.status == 200){
                resolve(xhr.responseText)
            }else{
                reject(‘出错了‘);
            }
        }
        xhr.open(‘get‘,‘/data‘);
        xhr.send(null);
    })
}

发送多次Ajax请求

queryData()
.then(function(data){
    return queryData();
})
.then(function(data){
    return queryData();
})
.then(function(data){
    return queryData();
})

2.5、then参数中的函数返回值
返回Promise实例对象
　　返回的该实例对象会调用下一个then
返回普通值
　　返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值
2.6、Promise常用的API
实例方法
　　p.then() 得到异步任务的正确结果
　　p.catch() 获取异常信息
　　p.finally() 成功与否都会执行（尚且不是正式标准）
　　语法结构：

queryData()
.then(function(data){
    console.log(data);
})
.catch(function(data){
    console.log(data);
})
.finally(function(){
    console.log(‘finished‘);
})

Vue基础——Vue前端交互

原文：https://www.cnblogs.com/michealyang/p/13717008.html