async和await 实现同步请求

系统管理员 2021-07-26 11:02 1007阅读 0赞

## 注意：async外面的是异步的，await会阻塞！ ##

## 一，基本使用 ##

其实就是之前学过的异步函数，异步编程在函数前写一个ansyc，就转化为异步函数，返回的是一个promise对象，于是就可以使用await关键字，可以把异步函数写成同步函数的形式，极大地提高代码的可读性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM0OTU2OA_size_16_color_FFFFFF_t_70_pic_center]  
原本的：

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)
    })

得到的结果是：  
![在这里插入图片描述][2020083015162310.png_pic_center]

## 二，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")
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM0OTU2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210726/1399ec394d464df09192a21152e50368.png
[2020083015162310.png_pic_center]: /images/20210726/d7753415561f4993b23fb44cfee2a07b.png