javascript-前后端交互-async与await

最新推荐文章于 2023-09-21 16:13:54 发布

gaog2zh

最新推荐文章于 2023-09-21 16:13:54 发布

阅读量411

点赞数

分类专栏： # javascirpt 文章标签： javascript 前后端交互

本文链接：https://blog.csdn.net/gaogzhen/article/details/107678343

版权

javascirpt 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

javascript-前后端交互-async与await

文章目录

1、基本用法
2、处理多个异步请求
- ***后记*** ：

内容

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

后记：

vue官网地址：https://cn.vuejs.org/

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA

gaog2zh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript-前后端交互-async与await

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

扫一扫