vue学习笔记-节接口调用-async和await

最新推荐文章于 2023-02-16 19:29:44 发布

笑道三千

最新推荐文章于 2023-02-16 19:29:44 发布

阅读量2.5k

点赞数

分类专栏： # vue基础

本文链接：https://blog.csdn.net/weixin_42349568/article/details/108306233

版权

vue基础专栏收录该内容

37 篇文章 1 订阅

订阅专栏

一，基本使用

其实就是之前学过的异步函数，异步编程在函数前写一个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>

还可以修改成这样：让这个异步函数把结果返回，结果依旧是一个promise对象，依旧可以使用then 进行结果的处理：

			//利用ansyc和await编写
			async function queryData(){
				var ret=await axios.get('adata',{
					params:{
						id:12,
						name:'lisi'
					}
				})
				//直接利用axios.get('地址')，通过await取得服务器的响应，并赋值给ret
				return ret.data
				//如果在响应拦截器中不设置转化为服务器传递的信息的话，
				//这里也可以直接设置，
				//因为是ansyc，所以返回的是一个promise对象！
			}
			queryData().then(data=>{
				console.log(data)
			})

得到的结果是：
在这里插入图片描述

二，async和await处理多个异步请求

如果有多个异步操作，需要按顺序完成，利用await可以把异步的操作用同步的方式来书写：

		   async function query(){
			   var ret1=await axios.get('data1')
			   var ret2=await axios.get('data2'+ret1.data)
			   //利用到了第一次异步的执行结果，所以是按顺序执行
			   return ret2.data
		   }
		   
		   query().then(data=>{
			   console.log(data)
		   })

对应的路由：

app.get('/data1',(req,res)=>{
	res.send("hello")
})
app.get('/data2hello',(req,res)=>{
	res.send("hello world")
})

笑道三千

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记-节接口调用-async和await

一，基本使用其实就是之前学过的异步函数，异步编程在函数前写一个ansyc，就转化为异步函数，返回的是一个promise对象，于是就可以使用await关键字，可以把异步函数写成同步函数的形式，极大地提高代码的可读性。原本的： axios.get('adata',{ params:{ id:123, name:'zhangsan' } }).then(function(ret){ console.log(ret)
复制链接

扫一扫