1.前后端交互模式
1.1 接口调用方式
- 原生Ajax
- 基于Jquery的ajax
- fetch
- axios
1.2 URL地址格式
1.传统形式的URL
格式:schema://host:port/path?query#fragment
- schema:协议。例如http、https、ftp等
- host:域名或者ip地址
- port:端口,http默认端口是80,可以省略
- path:路径,例如a/ab/abc
- query:查询参数,例如uname=lisi&age=12
- fragment:锚点(哈希Hash),用于定位页面的某个位置
Restful形式的URL
http请求方式
- GET 查询
- POST 添加
- PUT 修改
- 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((resolve,reject) => {
//成功时调用 resolve()
//失败时调用 reject()
});
p.then(ret => {
//从resolve得到正确结果
},ret => {
//从reject得到错误结果
})
2.4 基于Promise发送Aajx请求
1.处理原生Ajax
function queryData(url) {
var p = new Promise((resolve,reject) => {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readState == 4 && xhr.status == 200) {
resolve(xhr.responseText)
} else {
reject('error')
}
}
xhr.open('get','url');
xhr.send();
})
return p;
}
queryData(url).then(function(ret){
//正确信息
console.log(ret)
},function(data) {
//错误信息
console.log(data)
})
2.多次发送Ajax请求
queryData(url)
.then(function(data) {
console.log(data);
return queryData(url1)
})
.then(function(data) {
console.log(data)
return queryData(url2)
})
.then(function(data) {
console.log(data)
return queryData(url3)
})
2.5 then参数中的函数返回值
1.返回Promise实例对象
返回的该实例对象会调用下一个then
2.返回普通值
返回的普通值会直接传递给下一个then,通过then参数中函数的参数接收该值
2.6 Promise常用的API
1.实例方法
- p.then() 得到异步任务的正确结果
- p.catch() 获取异常信息
- p.finally() 成功与否都会执行(尚且不是正式标准)
2.对象方法
- Promise.all() 并发处理多个异步任务,所有任务都执行完成之后才能得到结果
- Promise.race() 并发处理多个异步任务,只要有一个任务完成就能看到结果
3.接口调用-fetch用法
3.1 fetch概述
1.基本特性
- 更加简单的数据获取方式、功能更强大、更灵活、可以看作是xhr的升级版
- 基于Promise实现
2.语法结构
fetch(url).then(fn)
.then(fn1)
...
.catch(fn2)
3.2 fetch的基本用法
fetch('/abc').then(data => {
return data.text();
}).then(ret => {
//这里才是最终得到的数据
console.log(ret)
})
3.3 fetch请求参数
1.常用配置选项
- method(String):http请求方式,默认为GET(GET,POST,PUT,DELETE)
- body(String):http请求参数
- header(Object):http请求头、默认为{}
2.GET请求方式的参数传递
- 传统方式
fetch('/abc?id=123').then(function(data) {
return data.text()
}).then(function(data) {
console.log(data)
})
- Restful
fetch('/abc/123',{
method:'get'
}).then(function(data) {
return data.text()
}).then(function(data) {
console.log(data)
})
3.POST请求方式的参数传递
fetch('/abc',{
method:'post',
body: 'uname=lisi&pwd=123',
headers: {
'Content-type':'application/x-www-form-urlencoded'
}).then(data => {
return data.text()
}).then(data => {
console.log(data)
})
3.4 fetch响应结果
响应数据格式
- text():将返回体处理成字符串类型
- json():返回结果和JSON.parse(responseText)一样
fetch('/abc').then(data => {
return data.json()
}).then(ret => {
console.log(ret)
})
4.接口调用-axios用法
4.1 axios的基本特性
axios(官网https://github.com/axios/axios)是一个基于Promise用于浏览器和node.js的HTTP客户端。它具有以下特征
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 自动转换JSON数据
4.2 axios的基本用法
axios.get('/adata').then(ret => {
//data属性名称是固定的,用于获取后台响应的数据
console.log(ret.data)
})
4.3 axios常用的API
- get:查询数据
- post:添加数据
- put:修改数据
- delete:删除数据
4.4 Get请求参数传递
1.Get参数传递
- URL传递
- 通过params传递
axios.get('/axios?id=123').then(ret => {
console.log(ret)
})
axios.get('/axios/123').then(ret => {
console.log(ret)
})
axios.get('/axios',{
params: {
id: 123
}
}).then(ret => {
console.log(ret)
})
2.Delete参数传递
- 和get类似
axios.delete('/axios?id=123').then(ret => {
console.log(ret)
})
axios.delete('/axios/123').then(ret => {
console.log(ret)
})
axios.delete('/axios',{
params: {
id: 123
}
}).then(ret => {
console.log(ret)
})
3.POST参数传递
- 通过选项传递参数(默认传递的是json格式的数据)
axios.post('/axios',{
uname: 'lisi',
age: 14
}).then(ret => {
console.log(ret.data)
})
- 通过URLSearchParams传递参数(application/x-www-form-urlencoded)
const params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post('/api/test',params).then(ret => {
console.log(ret.data)
})
4.5 axios响应结果
- data:实际响应回来的数据
- headers:响应头信息
- status:响应状态码
- statusText:响应状态信息
4.6 axios全局配置
- axios.defaults.timeout = 3000;//超时时间
- axios.baseURL = 'http://localhost:3000/app'//默认地址
- axios.defaults.headers['myToken']='asas';//设置请求头
4.7 axios拦截器
1.请求拦截器
在发送请求之前设置一些信息
//添加一个请求拦截器
axios.interceptors.request.use(function(config) {
//在请求发出之前进行一些信息设置
return config
},function(err){
//处理响应的错误信息
})
2.响应拦截器
在获取数据之前对数据做一些加工处理
//添加一个请求拦截器
axios.interceptors.response.use(function(res) {
//在请求发出之前进行一些信息设置
return res
},function(err){
//处理响应的错误信息
})
5.接口调用-async/await用法
5.1 async/await基本用法
- async/await是ES7引入的新语法,可以更加方便的进行异步操作
- async关键字用于函数上(async函数的返回值是Promise实例对象)
- await关键字用于async函数当中(await可以得到异步的结果)
async function queryData(id) {
const ret = await axios.get('/data');
return ret;
}
queryData.then(ret => {
console.log(ret)
})
5.2 async/await处理多个异步请求
async function queryData(){
const info = await axios.get('/async1');
const ret = await axios.get("/async2?info=" + info.data);
return ret.data;
}
queryData.then(ret => {
console.log(ret)
})