vue中使用async和await 代码示例

vue中使用async和await 代码示例

vue中使用异步async和await

• 引言
• async和await定义
• 使用场景
• 实战场景
• 小结

引言

在我们进行实际开发中会遇到异步请求的问题,这时候我们的异步请求的存在就非常的具备合理性了！接下来将会讲述异步编程终级解决方案async/await。

---

这段时间有部分小伙伴在问有没有什么好的刷题网站
在这里给大家推荐一款刷题网站点击访问牛客网
牛客网支持多种编程语言的学习，各大互联网大厂面试真题，从基础到拔高，快来体验一下吧！

async和await定义

async 是异步的意思，而 await 是等待的意思，await 用于等待一个异步任务执行完成的结果。
1.async/await 是一种编写异步代码的新方法（以前是采用回调和 promise）。
2. async/await 是建立在 promise 的基础上。
3. async/await 像 promise 一样，也是非阻塞的。
4. async/await 让异步代码看起来、表现起来更像同步代码。

使用场景

在实际开发中，相信大家都会遇到关于发送请求获取数据的问题，例如:如果你遇到了等第一个请求返回数据完，再执行第二个请求(可能第二个请求要传的参数就是第一个请求接口返回的数据)这个问题，该怎么去处理呢？由于我们在不使用异步请求的情况下，默认发送多个请求是异步执行的，就会导致我们也不知道到底是哪个接口优先被执行！！！
所以，我们必须要学会使用async/await!

实战场景

话不多说，直接上代码:

const datas = async ()=> {
  await request.selectPies(Route.path.split('/')[3]).then(res=>{
  	states.ids = res.obj
	console.log(res)
  })
  //查询发帖子用户信息
  await request.selectUsers(states.ids).then(res=>{
    console.log(res.obj)
  })
}
datas()
1
2
3
4
5
6
7
8
9
10
11

这里是在vue3语法糖中使用异步请求，从代码看出，第二个接口要使用第一个接口返回的数据，因此使用了异步请求。

小结

在现在以前后端分离开发的模式下，需要访问后端接口，我们必须要懂得什么是异步请求，异步请求很简单，就是给接口的访问加上了顺序，防止它们无厘头的不受顺序限制发送请求！

原文链接：https://blog.csdn.net/m0_52040370/article/details/124660219