vue3 中async/await实现异步请求
async/await 定义
async/await是在编写异步代码时使用的一种模式,它是基于Promises的。async关键字声明的函数自动返回一个Promise,而await关键字用于等待一个Promise完成。
async 是异步的意思,而 await 是等待的意思,await 用于等待一个异步任务执行完成的结果。
如果你遇到了 等第一个请求返回数据完,再执行第二个请求(可能第二个请求要传的参数就是第一个请求接口返回的数据) 【同步请求】这个问题,该怎么去处理呢?由于我们在不使用异步请求的情况下,默认发送多个请求是同步执行的,就会导致我们也不知道到底是哪个接口优先被执行!!!所以,我们必须要学会使用async/await实现异步请求!!!
情景:进入页面后需要先获取source_id, 然后根据source_id获取排队数据。
正常A嵌套B时:

使用async/await时:
onMounted(async ()=>{
await funA()
funB()
})
const funA = async () => {
let { data } = await matchDetail()
if(data.code == 0) {
searchForm.source_id = data.data.source_id //funB函数中调用接口必用参数
}
}
const funB = async () => {
let { data } = await applyLists(searchForm)
if(data.code == 0) {
//得到最终列表数据
}
}
总结:
在前后端分离的开发模式下,需要访问后端接口,我们必须要懂得什么是异步请求——给接口的访问加上了顺序,防止它们无厘头的不受顺序限制发送请求!
部分文案参考自:vue3项目实战中的接口调用方法(一)async/await用法 对axios二次封装 实现异步请求_vue3 async-CSDN博客
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)