Vue基础 前后端交互
- 作者: 十年树木百年树袋熊2015
- 来源: 51数据库
- 2021-08-03
Promise
1、实例化promise对象，构造函数中传递函数，该函数用于处理异步任务
2、resolve和reject两个参数用于处理成功和失败的情况并通过.then获取处理结果
<script type="text/javascript">
var p = new Promise(function(resolve,reject){
setTimeout(function(){
var flag = false;
if(flag){
resolve("hello")
}else {
reject("error")
}
},1000)
})
p.then(function(resolve){
console.log(resolve);
}).catch(function(reject){
console.log(reject);
})
</script>
基于promise处理ajax请求
<script type="text/javascript">
function proa(url){
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState!=4){
return false;
}
if(xhr.readyState ==4 && xhr.status==200){
resolve(xhr.responseText);
}else{
reject("出错了")
}
};
xhr.open("get",url);
xhr.send(null)
})
}
proa("http://localhost:3000/test")
.then(function(resolve){
console.log(resolve);
return proa("http://localhost:3000/test1")
}).then(function(resolve){
console.log(resolve);
}).catch(function(reject){
console.log(reject);
})
</script>
promise实例方法
.then（）:返回成功结果resolve
.catch（）：返回失败结果reject
.finally（）：成功与否都会执行
promise对象方法
promise.all（）：并发处理多个异步任务，所有任务完成后才能得到结果
promise.race（）：并发处理多个异步任务，一个任务完成就能得到结果
接口调用fetch用法
更简单的数据获取方式
<script type="text/javascript">
fetch("http://localhost:3000/test").then(data => {
return data.text()
}).then(ret => {
console.log(ret);
})
</script>
fetch配置
1、method：GET,POST,PUT,DELETE 请求方式
2、body（String）请求参数
3、headers（Object）请求头，默认为{}
~get的请求方式：
传统：
fetch("http://localhost:3000/books?id=123",{
method:"get"
}).then(data => {
return data.text()
}).then(ret => {
console.log(ret);
});
app.get("/books",(req,res) => {
res.send("传统方式的请求"+req.query.id)
})
Restful：
fetch("http://localhost:3000/book/456",{
method:"get"
}).then(data => {
return data.text()
}).then(ret => {
console.log(ret);
});
app.get("/book/:id",(req,res) => {
res.send("Restful方式的请求"+req.params.id)
})
~delete请求：
fetch("http://localhost:3000/book/789",{
method:"delete"
}).then(data => {
return data.text()
}).then(ret => {
console.log(ret);
})
app.delete("/book/:id",(req,res) => {
res.send("delete方式的请求"+req.params.id)
})
~post 请求：
字符串方式：
fetch("http://localhost:3000/book",{
method:"post",
body:"username=lisi&age=20",
headers:{
"Content-Type":"application/x-www-form-urlencoded"
}
}).then(data => {
return data.text()
}).then(ret => {
console.log(ret);
})
app.post("/book",(req,res) => {
res.send("post字符串方式的请求"+req.body.username+'---'+req.body.age)
})
json方式：
fetch("http://localhost:3000/books",{
method:"post",
body:JSON.stringify({
username:"zhangsan",
age:80
}),
headers:{
"Content-Type":"application/json"
}
}).then(data => {
return data.text()
}).then(ret => {
console.log(ret);
})
app.post("/books",(req,res) => {
res.send("postJson方式的请求"+req.body.username+'---'+req.body.age)
})
~put请求：
fetch("http://localhost:3000/books/000",{
method:"put",
body:JSON.stringify({
username:"xiaoming",
age:60
}),
headers:{
"Content-Type":"application/json"
}
}).then(data => {
return data.text()
}).then(ret => {
console.log(ret);
})
app.put("/books/:id",(req,res) => {
res.send("postJson方式的请求"+req.body.username+'---'+req.body.age+'---'+req.body)
})
响应结果
.text（）：将响应结果转换为字符串
.json（）：将响应结果以json形式
axios
<script type="text/javascript">
axios.get("http://localhost:3000/test")
.then(ret => {
console.log(ret.data);
})
</script>
app.get("/test",(req,res) => {
res.send("helloaxios")
})
请求方式
~get请求方式：
url参数：
axios.get("http://localhost:3000/test?id=abc")
.then(function(ret){
console.log(ret.data);
})
app.get("/test",(req,res) => {
res.send("get url参数普通方式请求"+req.query.id)
})
Restful参数：
axios.get("http://localhost:3000/test/cba")
.then(function(ret){
console.log(ret.data);
})
app.get("/test/:id",(req,res) => {
res.send("get url参数Restful方式请求"+req.params.id)
})
params参数：
axios.get("http://localhost:3000/test",{
params:{
id:"acb"
}
})
.then(function(ret){
console.log(ret.data);
})
app.get("/test",(req,res) => {
res.send("get url参数params方式请求"+req.query.id)
})
~delete请求：
axios.delete("http://localhost:3000/test/321",{
params:{
uname:"lisi",
age:20
}
})
.then(function(ret){
console.log(ret.data);
})
app.delete("/test/:id",(req,res) => {
res.send("delete方式请求"+req.query.uname+req.query.age+req.params.id)
})
~post请求：
json方式：
axios.post("http://localhost:3000/test",{
uname:"lisi",
age:20
})
.then(function(ret){
console.log(ret.data);
})
app.post("/test",(req,res) => {
res.send("post json方式请求"+req.body.uname+'---'+req.body.age)
})
字符串方式：
var params = new URLSearchParams();
params.append('uname','zhangsan');
params.append('age',20);
axios.post("http://localhost:3000/test",params)
.then(function(ret){
console.log(ret.data);
})
app.post("/test",(req,res) => {
res.send("post 字符串方式请求"+req.body.uname+'---'+req.body.age)
})
~put请求：
axios.put("http://localhost:3000/test/123",{
uname:"lisi",
age:20
})
.then(function(ret){
console.log(ret.data);
})
app.put("/test/:id",(req,res) => {
res.send("put方式请求"+req.body.uname+'---'+req.body.age+'---'+req.params.id)
})
axios全局配置
axios.defaults.timeout=3000；设置超时
axios.defaults.baseURL="…"设置默认地址
axios.defaults.headers[’…’]设置请求头
axios拦截器
1、请求拦截器
axios.interceptors.request.use(function(res){
res.headers.mytoken= "nihao"
return res
},function(err){
console.log(err);
})
axios.get("http://localhost:3000/test")
.then(function(res){
console.log(res.data);
})
2、响应拦截器：
axios.interceptors.response.use(function(res) {
var data = res.data
return data
})
axios.get("http://localhost:3000/test")
.then(function(res){
console.log(res);
})
async-await
async function fn(){
var res = await axios.get("http://localhost:3000/test")
return res;
}
fn().then(res => {
console.log(res.data);
})
推荐阅读
