目标:
能够说出什么是前后端交互模式
能够说出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‘); })
原文:https://www.cnblogs.com/michealyang/p/13717008.html