前端框架学习之Vue 3.前后端交互(promise,fetch,axios，async/await)
1.前后端交互模式接口调用方式·原生ajax·基于jQuery的ajax·fetch·axios2.Promise用法异步编程效果分析定时任务ajax事件函数多次异步调用的依赖分析·多次异步结果不确定性，不能依赖执行顺序·对异步结果有依赖的，需要用嵌套形式promise是异步编程的一种解决方案，promise是一个对象，它可以获取异步操作的消息。使用promise的好处·可以避免多次异步调用嵌套问
·
1.前后端交互模式
接口调用方式
·原生ajax
·基于jQuery的ajax
·fetch
·axios
2.Promise用法
异步编程效果分析
定时任务
ajax
事件函数
多次异步调用的依赖分析
·多次异步结果不确定性，不能依赖执行顺序
·对异步结果有依赖的，需要用嵌套形式
promise是异步编程的一种解决方案，promise是一个对象，它可以获取异步操作的消息。
使用promise的好处
·可以避免多次异步调用嵌套问题
·promise对象提供了简洁的API，使得控制异步更加容易
promise的基本用法
·实例化promise对象，构造函数中船队函数，该函数中用于处理异步任务
·resolve,reject两个参数用于处理成功和失败的两种情况，并通过p.then获取处理结果。
var p =new Promise(function(resolve,reject)){
//成功时调用resolve，失败时调用reject
};
p.then(function(ret){
//从resolve得到正常结果
},function(ret){
//从reject得到错误信息
})
eg
var p =new Promise(function(resolve,reject){
//成功时调用resolve，失败时调用reject
//这里实现异步任务
setTimeout(function(){
var flag=false;
if (flag){
//正常情况，
resolve('hello');
}else{
reject('error');
}
},100)
});
p.then(function(data){
//从resolve得到正常结果
console.log(data);
},function(ret){
//从reject得到错误信息
console.log(ret);
})
基于promise处理ajax请求
处理原生ajax
function queryData(url){
var p1 = 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 p1;
}
queryData('http://www.baidu.com').then(function(data){
console.log(data);
},function(ret){
console.log(ret);
})
发送多次请求，简化处理流程，上一个的返回直接.then来接收，return的其实是一个新的Promise对象
queryData('http://www.baidu.com')
.then(function(data){
console.log(data)
return queryData('https://localhost:8000/login');
}).then(function(data){
console.log(data.login.res)
return queryData('https://localhost:8000/queryinfo');
}).then(function(data){
....
})
then参数中的函数返回值
1、返回promise对象
·返回的该实例对象会调用下一个then
2、返回普通值
·返回的普通值会直接传递给下一个then，通过then参数中的函数的参数接收该值。
返回普通值时会创建一个默认的promise，从而保证下一个then可以正常执行，只是不需要用户创建而已。
queryData('https://www.baidu.com')
.then(function(data){
// console.log(data)
return queryData('http://localhost:8000/login');
}).then(function(data){
// console.log(data.login.res)
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve('123');
},1000)
reject('234');
})
}).then(function(data){
console.log(data);
return 'hello';
}).then(function(data){
console.log(data);
})
Promise常用api
1.实例方法
p.then() 得到异步任务的正确结果
p.catch() 获取异常信息
p.finally() 成功与否都会执行（尚且不是正确标准）
queryData('https://www.baidu.com')
.then(function(data){
console.log(data)
})
.catch(function(data){
console.log(data)
})
.finally(function(){
console.log('finished')
})
2.对象方法
Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果。
Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果。
var p1=queryData('http://localhost:8000/p1');
var p2=queryData('http://localhost:8000/p2');
var p2=queryData('http://localhost:8000/p3');
Promise.all([p1,p2,p3]).then(function(data){
console.log(data); //返回结果为一个数组，结果和传参顺序对应
})
Promise.race([p1,p2,p3]).then(function(data){
console.log(data); //只响应最先返回的结果，后面的结果不管
})
4.fecth用法
fetch基本特性
更加简单的数据获取方式，功能更加强大，更灵活，可以看作是xhr的升级版
基于Promise实现
fetch语法结构
fetch(url).then(fn2)
.then(fn3)
.then(fn4)
...
.catch(fn)
fetch的基本用法
fetch('/abc').then(data=>{
return data.text()
}).then(ret=>{
console.log(ret);//这里的才是最终结果
})
fetch('http://localhost:8000/fdata').then(data=>{
//text()属于fetchAPI的一部分，返回一个Promise实例对象，用于获取后台返回的数据
return data.text()
}).then(res=>{
console.log(res);
})
fetch请求参数
1.常用配置项
·method(String) Http请求方式 默认为GET(GET、POST、PUT、DELETE)
body(String) HTTP的请求参数
headers(Object) HTTP的请求头 默认为{}
get请求的参数传递，delete请求参数与get一致
fetch('http://localhost:8000/fdata?id=3').then(data=>{
return data.text()
}).then(res=>{
console.log(res);
})
----------------------------------------
//需要更改后台接口 restful风格
fetch('http://localhost:8000/fdata/123',{
method:'GET', //或者delete
}).then(data=>{
return data.text()
}).then(res=>{
console.log(res);
})
POST请求方式的传递 PUT请求和POST类似
var reqBody={
"username":"Lvan",
"age":"18"
};
fetch('http://localhost:8000/updateInfo',{
method:'POST',
body:JSON.stringify(reqBody), // username="Lvan"&age=18 表单类型时
headers:{
'content-type':'application/json'
}
}).then(data=>{
return data.text()
}).then(res=>{
console.log(res);
})
fetch响应结果
响应数据格式
text():将返回体处理成字符串类型
json():将返回体处理成json类型数据
5.axios用法
是一个基于Promise用于浏览器和node.js的HTTP客户端
特征：
·支持浏览器的node.js
·支持promise
·能拦截和请求和响应
·自动转换json数据
axios的基本用法
axios.get('/data').then(res={
console.log(res.data)//data属性名称是固定的，用于获取后台响应的数据
})
axios的常用API
get 查询
post 添加
put 更新
delete 删除
get传递参数 delete方法类似
·直接通过url拼接字符串
·通过restfull形式的方式传参
axios.get('/abc/123').then(res=>{
console.log(res.data)
})
·通过params传递
axios.get('/abc',{
params:{
id:''
}
}).then(res=>{
console.log(res.data)
})
POST方式传参 PUT类似
//默认为json格式的数据
axios.post('/abc',{
id:'123',
pwd:'123456'
}).then(res=>{
console.log(res.data)
})
//传递表单形式
const param=new URLSearchParams();
params.append('id','123');
params.append('pwd','123456');
axios.post('/abc',params).then(res=>{
console.log(res.data)
})
axios的响应结果
data: 响应的数据
headers: 响应头信息
status: 响应状态码
statusText:响应状态信息
axios的全局配置
axios.defaults.timeout=3000 //超时时间
axios.defaults.baseURL ='http://localhost:3000/app' //默认地址
axios.defaults.headers['mytoken'] ='asdklashdlsakdlas' //header信息
axios拦截器
请求拦截器：发出请求之前设置一些信息
axios.interceptors.request.use(function(config){
console.log(config.url)
config.headers.mytoken='aisdhoashdaklhfas';
},function(err){
console.log('error');
})
axios.get('/abc').then(res=>{
console.log(res.data);
})
响应拦截器：响应返回后经过响应拦截器才能被客户端使用
axios.interceptors.response.use(function(res){
return res;
},function(err){
console.log('error');
})
axios.get('/abc').then(res=>{
console.log(res.data);
})
可以在响应拦截器中获取到res.data直接返回。
6.async/await的用法
· async/await 是ES7引入的新语法，可以更加方便的进行异步操作
· async关键字用于函数上（async函数的返回值是Promise实例对象）
· await 关键字用于async函数当中（await可以得到异步的结果）
async function queryData(id){
cont res= await axios.get('/data'); //get返回的是一个promise对象
return res;
}
queryData.then(res={
console.log(res);
})
-----------------------------
async function queryData(id){
cont res= await new Promise(function(resole,reject){
setTimeout(function(){
resolve('right');
},1000);
reject('error');
})
return res;
}
queryData.then(res={
console.log(res);
})
async/await处理多个异步请求
async function queryData(id) {
//按顺序的写await请求
var res = await axios.get('/ab',id);
var res1 = await axios.get('/cd', info.data.id)
return res1.data;
}
queryData(1).then(res={
console.log(res)
})
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)