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博客