一文教会你vue中使用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()
这里是在vue3语法糖中使用异步请求，从代码看出，第二个接口要使用第一个接口返回的数据，因此使用了异步请求。
补充：vue中async await请求处理
Promise.all() 用法示例：
const wait = ms => new Promise((resolve, reject) => {
setTimeout(() => {
console.log(`wait ${ms}ms`)
resolve()
}, ms)
})
const PA = Promise.all([wait(3000), wait(1000), wait(2000)])
// 依次打印：wait 1000ms wait 2000ms wait 3000msasync-await 同时触发多个异步操作示例
const wait = ms => new Promise((resolve, reject) => {
setTimeout(() => {
console.log(`wait ${ms}ms`)
resolve()
}, ms)
})
;(async () => {
await Promise.all([wait(3000), wait(1000), wait(2000)])
// 依次打印：wait 1000ms wait 2000ms wait 3000ms
})()问题：接口B需要接口A返回的数据，如果同时请求，控制不了返回速度，会出现B快于A，
实现：
async表示函数里有异步操作，
await表示紧跟在后面的表达式需要等待结果。
methods: {
fetchData: async function () {
var that = this
var code = Store.fetchYqm();
let params = {
inviteCode: code
}
const response = await http.post(params,api.getCode)
var resJson = response.data;
}
}小结
在现在以前后端分离开发的模式下，需要访问后端接口，我们必须要懂得什么是异步请求，异步请求很简单，就是给接口的访问加上了顺序，防止它们无厘头的不受顺序限制发送请求！
到此这篇关于vue中使用async和await的文章就介绍到这了,更多相关vue使用async和await内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍vue2.0 移动端实现下拉刷新和上拉加载更多的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
Vue数据与事件绑定以及Class和Style的绑定详细讲解
这篇文章主要介绍了Vue数据与事件绑定以及Class和Style的绑定，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-01-01
watch和computed都是以Vue的依赖追踪机制为基础的,当某一个依赖型数据发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动，这篇文章简单介绍下Vue中computed和watch的区别异同，感兴趣的朋友一起看看吧2023-02-02
本篇文章主要介绍了如何实现一个简单的 vuex，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家介绍了Vue vxe-table使用问题收录小结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要介绍了vue项目中使用crypto-js实现加密解密方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了浅谈Vue入门需掌握的知识，感兴趣的同学参考下2021-04-04
这篇文章主要介绍了解决Vue 给mapState中定义的属性赋值报错的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
这篇文章主要介绍了Vue3如何配置多级代理问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
路由存在两者模式,一种是历史模式history,一种是hash模式,下面这篇文章主要给大家介绍了关于vite vue3下配置history模式路由的相关资料,需要的朋友可以参考下2023-01-01
最新评论