🔥点击进入vue专栏🔥

上期推文中讲述了vue3项目实战中接口调用的相关知识点，介绍了调用接口的过程和简要方法。🔥点击复习vue3项目实战中接口的调用🔥 从本期文章开始将会不定时更新 vue3项目实战中接口调用的三大方法。👏👏👏本期文章将重点介绍vue3的 async和await实现异步请求接口 （👏👏👏欢迎大佬们多多指教！）

async/await定义

在进行实际开发时会遇到异步请求的问题，这时候我们异步请求的存在就非常具有合理性了。

async 是异步的意思，而 await 是等待的意思，await 用于等待一个异步任务执行完成的结果。

🔥1.async/await 是一种编写异步代码的新方法

（以前是采用回调和 promise）。

2. async/await 是建立在 promise 的基础上。

3. async/await 像 promise 一样，也是非阻塞的。

🔥4. async/await 让异步代码看起来、表现起来更像同步代码。

async/await用法🔥

async/await的基本用法

async/await是ES7引入的新语法，可以更加方便的进行异步操作 async关键词用于函数上（async函数的返回值是Promise实例对象） await关键子用于async函数当中（await可以得到异步的结果）

👇👇 基本格式 如下：

async function queryData(id) { const ret = await axios.get(/data); return ret; } queryData.then(ret=>{ console.log(ret) })

示例1（详细版含注解）

：

源码： const initGetList = async () => { // 函解构用async和await包裹 const {data:res} = await getList(data) // 获取接口调用函数getList中的值data 其中data是表单里的数据 // 对data进行解构赋值 取出请求的结果res console.log(res) // 控制台打印结果 => 请求成功 code为200 data.list = res.data // 将请求结果的data值赋给data.list 方便表格table与之数据双向绑定 } initGetList() //调用函数

这是一个请求后端接口，并将数据返回到后台管理的table表格上的例子。

template部分代码：（UI组件库使用的是Ant Design Vue）

<a-table :data-source="data.list" :columns="columns" style="width:100%"></a-table>

示例2：

// 配置请求的基准URL地址 axios.defaults.baseURL = http:localhost:3000; //axios请求接口 axios.get(adata).then(function(ret){ console.log(ret.data) }) //async请求接口 await后面是Promise实例对象 async function queryData() { var ret = await axios.get(adata); // console.log(ret.data) return ret.data; } queryData().then(function (data) { // 赋值过程 console.log(data) }) //服务器端的接口 app.get(/adata, (req, res) => { res.send(Hello axios!) })

async/await的使用场景

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

async/await实战🔥🔥

处理一个异步请求

验证登录：

源码：

// 验证登录 // async 和 await 包裹需要请求的对象的值 相当于对axios的一个二次封装 const handleFinish = async (value: any) => { // 表单输入完毕后点登录调用handleFinish函数 // async包裹handleFinish函数的参数value 传参 console.log(value) const {data:res} = await userLoginApi(value) // 对data解构赋值 取出请求结果res data是请求接口中存放表单数据的变量 // 先从请求接口的函数userLoginApi中获取存入的表单数据value 然后用await包裹 赋值给请求结果res console.log(res) if(res.code === 20001){ // 这里的20001来自浏览器中 要看清楚是成功的值还是失败的值 console.log(login successfully) message.success(login succesfully) // 数据验证通过弹出跳转成功提示框 // 用对话存储的方法set(送进去)一个token window.sessionStorage.setItem(token,res.data.tokenValue) // token的位置从浏览器控制台中可以得到 router.push("/home") // 数据验证成功后跳转页面 } else { message.error(请求失败 请重新输入) // 数据验证不成功则弹出错误提示框 console.log(error) } };

表格数据：（更多见示例一）

处理多个异步请求

第一个异步请求的结果 可以作为第二个异步请求内部的参数，进行判断等数据操作。 形成链式关系

示例1：

// 配置请求的基准URL地址 axios.defaults.baseURL = http://localhost:3000; //async请求接口 async function queryData() { var info = await axios.get(async1); //axios传递给服务器/async2接口的info.data参数,用于接口内部判断 //传参格式：[ 地址？属性名=属性值 ]or [ 地址？对象= + 对象.属性名] var ret = await axios.get(async2?info= + info.data); return ret.data; } queryData().then(function(data){ console.log(data) }) //服务器端的接口 app.get(/async1, (req, res) => { res.send(hello) }) app.get(/async2, (req, res) => { if (req.query.info == hello) { res.send(async1的结果确实是hello) } else { res.send(error) } })

示例2：

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 setup语法糖中使用异步请求，从代码看出，第二个接口要使用第一个接口返回的数据，因此使用了异步请求。

summary

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

以上就是vue3项目实战中接口调用方法——async/await用法的详细内容。后期会对剩余两种接口调用方法 fetch axios不定期更新！！