Vue前端交互
程序员文章站
2023-12-22 13:50:04
...
1、接口调用方式
- 原生ajax
- 基于jQuery的ajax
- fetch
- axios
2、URL地址格式
Restful形式的URL
- HTTP 请求方式
- GET 查询
- POST 添加
- PUT 修改
- DELETE 删除
3、Promise 概述
- Promise 是异步编程的一种解决方案,从语法上讲,Promise 是一个对象,从它可以获取异步操作的消息
- 使用Promise 的好处
1.可以避免多层异步调用嵌套问题(回调地狱)
2.Promise 对象提供了简介API,使得控制异步操作更加容易
4、Promise 的基本用法
实例化Promise 对象,构造函数中传递函数,该函数中用于处理异步任务
resolve和reject两个参数用于处理成功和失败两种情况,并通过p.then获取处理结果
var p=new Promise (function(resolve,reject){
//成功时调用 resolve()
//失败时调用reject ()
});
p.then(function(ret){
//从resolve得到正常结果
},function(ret){
//从reject得到错误信息
});
5、基于Promise 处理Ajax请求
1.处理原生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);
})
}
2.发送多次ajax请求
queryData()
.then(function(data){
return queryData();
})
.then(function(data){
return queryData();
})
.then(function(data){
return queryData();
});
6、then参数中的函数返回值
1.返回Promise 实例对象
- 返回的该实例对象会调用下一个then
2.返回普通值
- 返回的普通值会直接传递给下一个then,通过参数中函数的参数接收该值
7、Promise 常用的API
1.实例方法
- p.then()得到异步任务的正确结果
- p.catch()获取异常信息
- p.finally()成功与否都会执行(尚且不是正式标准)
queryData()
.then(function(data){
console.log(data);
})
.catch(function(data){
console.log(data);
})
.finally(function(){
console.log('finished');
});
2.对象方法
- Promise.all()并发处理多个异步任务,所有任务都执行完成才能得到结果
- Promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果
Promise.all([p1,p2,p3]).then((resule)=>{
console.log(result)
})
Promise .race([p1,p2,p3]).then((result)=>{
console.log(resule)
})
8、接口调用-fatch用法
fetch概述
1.基本特性
- 更加简单的数据获取方式,功能更加强大,更灵活,可以看做是xhr的升级版
- 基于Promise实现
2.语法结构
fetch(url).then(fn2)
.then(fn3)
...
.catch(fn)
3.fetch的基本用法
fetch('/abc').then(data=>
return data.text();
}).then(ret=>{
//注意这里得到的才是最终的数据
console.log(ret);
});
4.fetch请求参数
1.GET请求方式的参数传递
fetch('/abc?id=123').then(data=>{
return data.text();
}).then(ret=>)
//注意这里得到的才是最终的数据
console.log(ret);
});
fetch('/abc/123',{
method:'get'
}).then(data=>{
return data.text();
}).then(ret=>){
//这里得到的是最终数据
console.log(ret);
});
2.DELETE请求方式的参数传递
fetch('/abc/123',{
method:'delete'
}).then(data=>{
return data.text();
}).then(ret=>{
//这里得到的是最终数据
console.log(ret);
});
3.POST请求方式的参数传递
fetch('/books',{
method:'post',
body:'uname=lisi&pwd=123',
headers:{
'Content-Type':'application/x-www-form-urlencoded',
}
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
});
4.PUT请求方式的参数传递
fetch('bools/123',{
mehod:'put',
body:JSON.springify({
uname:'lisi',
age:12
})
headers:{
'Content-Type':'applicaation/json',
}
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
});
5.fetch相应结果
响应数据格式
- text():将返回体处理成字符串类型
- json():返回结果和JSON.parse(responseText)一样
fetch('/abc'then(data=>{
//return data.text();
return data.json();
}).then(ret=>{
console.log(ret);
});
9、axios的基本特性
1.axios是一个基于Promise用于浏览器和node.js的HTTP客户端
- 特征
支持浏览器和node.js
支持Promise
能拦截请求和相应
自动转换JSON数据 - 基本用法
axios.get('/adata')
.then(ret=>{
//data属性名称是固定的,用于获取后台响应数据
console.log(ret.data)
})
- axios常用的API
get:查询数据
post:添加数据
put:修改数据
delete:删除数据
2.axios的参数传递
1.GET传递参数
- 通过URL传递参数
- 通过params选项传递参数
axios.get('/adata?id=123')
.then(ret=>{
console.log(ret.data)
})
axios.get('/adata/123')
.then(ret=>{
console.log(ret.data)
})
axios.get('/adata',{
parmas:{
id:123
}
})
.then(ret=>{
console.log(ret.data)
})
2.POST传递参数
- 通过选项传递参数(默认传递的是json格式的数据)
axios.post('/adata',{
uname:'tom',
pwd:123
}).then(ret=>{
console.log(ret.data)
})
3.PUT传递参数
- 参数传递与POST类似
axios.put('/adata/123',{
uname:'tom',
pwd:123
}).then(ret=>{
console.log(ret.data)
})
3.接口调用-axios用法
- axios的全局配置
- axios.defaults.timeout=3000;//超越时间
- axios.defaults.baseURL=‘http://localhost:3000/app’//默认地址
- axios.defaults.headers[‘mytoken’]=‘aqwerwqwerqwer2ewrwe23eresdf23’//设置请求头
4.axios拦截器
1.请求拦截信息
在请求发出之前设置一些信息
//添加一个请求信息
axios.interceptors.request.use(function(config)){
//在请求之前进行一些信息设置
return config;
},function(err){
//处理响应的错误信息
});
10、接口调用-async/await用法
基本用法
- async/await是ES7引入的新语法,可以更加方便的进行异步操作
- async关键字用于函数上(async函数的返回值是Promise实例对象)
- awiat关键字用于async函数当中(await可以得到异步的结果)
async function queryData(id){
const ret=await axios.get('/data');
return ret;
}
queryData.then(ret=>{
console.log(ret)
})