vue中如何使用async和await(async,await,vue,开发技术)

！！

所以，我们必须要学会使用async/await!

实战场景

话不多说，直接上代码:

constdatas=async()=>{
awaitrequest.selectPies(Route.path.split('/')[3]).then(res=>{
states.ids=res.obj
console.log(res)
})
//查询发帖子用户信息
awaitrequest.selectUsers(states.ids).then(res=>{
console.log(res.obj)
})
}
datas()

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

补充：vue中async await请求处理

Promise.all()用法示例：

constwait=ms=>newPromise((resolve,reject)=>{
setTimeout(()=>{
console.log(wait${ms}ms)
resolve()
},ms)
})
constPA=Promise.all([wait(3000),wait(1000),wait(2000)])
//依次打印：wait1000mswait2000mswait3000ms

async-await同时触发多个异步操作示例

constwait=ms=>newPromise((resolve,reject)=>{
setTimeout(()=>{
console.log(wait${ms}ms)
resolve()
},ms)
})
;(async()=>{
awaitPromise.all([wait(3000),wait(1000),wait(2000)])
//依次打印：wait1000mswait2000mswait3000ms
})()

问题：接口B需要接口A返回的数据，如果同时请求，控制不了返回速度，会出现B快于A，

实现：

async表示函数里有异步操作，

await表示紧跟在后面的表达式需要等待结果。

methods:{
fetchData:asyncfunction(){
varthat=this
varcode=Store.fetchYqm();
letparams={
inviteCode:code
}
constresponse=awaithttp.post(params,api.getCode)
varresJson=response.data;
}
}

读到这里，这篇“vue中如何使用async和await”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。