javascript-前后端交互-async与await

javascript-前后端交互-async与await目录文章目录1、基本用法2、处理多个异步请求***后记*** ：内容1、基本用法async/await是ES7引入的新语法，可以更加方便的进行异步操作async用于函数上，（async函数的返回值是Promise对象）await用于async函数中，用于获取异步执行的结果格式：async function 方法名([parmas]) {con

gaog2zh

515人浏览 · 2020-07-29 23:40:07

gaog2zh · 2020-07-29 23:40:07 发布

javascript-前后端交互-async与await

内容

1、基本用法

async/await是ES7引入的新语法，可以更加方便的进行异步操作
async用于函数上，（async函数的返回值是Promise对象）
await用于async函数中，用于获取异步执行的结果

格式：

  async function 方法名([parmas]) {
  	const ret = await axios.方法
  	return ret
  }
  
  方法名()
  	then(ret => {
  		// 处理结果
  	})

示例代码1-1：

  // 后台路由
  app.get('/adata', (req, res) => {
    res.send('Hello axios!')
  })

  // 前端页面
  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>axios</title>
  </head>
  <body>
  	<script src="../../node_modules/axios/dist/axios.js"></script>
  	<script>
  		axios.defaults.baseURL = 'http://localhost:3000'
  	   async function queryData() {
  			return axios.get('adata')
  	   }

  	   queryData()
  			.then(ret => {
  				console.log(ret.data);
  			})
  	</script>
  </body>
  </html>

  // 结果
  Hello axios!

2、处理多个异步请求

示例代码2-1：

  // 后台路由
  app.get('async1', (req, res) => {
    res.send('hello')
  })

  app.get('async2', (req, res) => {
    if(req.query.info === 'hello') {
  	res.send('world')
    } else {
  	res.send('error')
    }
  })

  // 前端代码

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>axios</title>
  </head>
  <body>
  	<script src="../../node_modules/axios/dist/axios.js"></script>
  	<script>
  		axios.defaults.baseURL = 'http://localhost:3000'
  	   async function queryData() {
  		   const info = await axios.get('async1')
  		   const ret  = await axios.get('async?info=' + info.data)
  		   return ret
  	   }

  	   queryData()
  			.then(ret => {
  				console.log(ret.data);
  			})
  	</script>
  </body>
  </html>

  // 结果：
  world