vue学习笔记-节接口调用-async和await
https://blog.csdn.net/weixin_42349568/article/details/108306233
一，基本使用
其实就是之前学过的异步函数，异步编程在函数前写一个ansyc，就转化为异步函数，返回的是一个promise对象，于是就可以使用await关键字，可以把异步函数写成同步函数的形式，极大地提高代码的可读性。
原本的：
axios.get('adata',{
params:{
id:123,
name:'zhangsan'
}
}).then(function(ret){
console.log(ret)
})
现在：
//利用ansyc和await编写
async function queryData(){
var ret=await axios.get('adata',{
params:{
id:12,
name:'lisi'
}
})
//直接利用axios.get('地址')，通过await取得服务器的响应，并赋值给ret
console.log(ret)
//因为响应拦截器已经处理成ret.data了，所以这里会直接得到服务器响应的信息
}
queryData()
整体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
axios.defaults.baseURL='http://localhost:3000/'
//axios请求拦截器
axios.interceptors.request.use(function(config){
config.headers.mytoken='nihao'
return config
},function(err){
console.log(err)
})
//axios响应拦截器
axios.interceptors.response.use(function(res){
//console.log(res)//这里获取到的res就是之前认知中的res,是把服务器传回来的数据一起包裹在一个对象res里面的。
//而真正的服务器传过来的数据是res.data
//所以说，响应拦截器的作用就是拦截服务器的响应的东西，拦截之后，再将数据处理后交给客户端
//比如说，我们想让客户端直接获取服务器传过来的信息时。
var data=res.data
return data
},function(err){
console.log(err)
})
//利用ansyc和await编写
async function queryData(){
var ret=await axios.get('adata',{
params:{
id:12,
name:'lisi'
}
})
//直接利用axios.get('地址')，通过await取得服务器的响应，并赋值给ret
console.log(ret)
//因为响应拦截器已经处理成ret.data了，所以这里会直接得到服务器响应的信息
}
queryData()
// axios.get('adata',{
// params:{
// id:123,
// name:'zhangsan'
// }
// }).then(function(ret){
// console.log(ret)
// })
</script>
</body>
</html>