前端笔记(9) Vue3 async await 循环调接口使用案例
async和await是的语法,具体详细介绍可以看阮一峰的教程。这里我只是介绍在日常开发中,async和await的常见用法。
·
简介
async和await是JavaScript的语法,具体详细介绍可以看阮一峰的教程async 函数。
这里我只是介绍在日常开发中,async和await的常见用法。
- async:异步函数,返回的是一个Promise对象,可以使用then方法添加回调函数。
- await:对紧跟在await后面的表达式,需要等待它的结果,其完成后再接着执行后面的语句。
- await关键字只能放在async函数里,await配合async一起使用
async
定义一个异步方法很简单,在函数前边加上 async 关键字即可。
<template>
<el-button @click="buttonClick">我是按钮</el-button>
</template>
<script setup lang="ts">
//用async定义一个异步函数
async function sayHello(num: string) {
return "Hello,亚瑟王" + num
}
function buttonClick() {
sayHello("1").then(result => {
console.log(result)
})
console.log("虽然我在后边,但是我先执行")
}
</script>
运行结果:
可以看到sayHello()的返回值是后打印出的,因为它是异步方法。
await
await 会让它后面的表达式变成同步,当该表达式执行完成后,才会继续执行下面的代码。
对上面的buttonClick()进行修改:
- function buttonClick()的前面加上async
- sayHello的前面加上await
- 修改最后打印的中文
async function buttonClick() {
await sayHello("1").then(result => {
console.log(result)
return result
});
console.log("虽然我在后边,但是我先执行,是真的吗?")
}
运行结果:
可以看出sayHello()先执行完成,在执行最后一句console.log()的。
案例:在for循环中调用异步函数
- 重要的注意点:循环调用异步函数,要用for,不能用forEach
- listByDictTypeCode()是一个异步函数,根据code调用后端接口,返回字典数据
1 不使用async和await
function myFunction() {
const dictMap = getDictMap();
console.log("aa的值 = " + dictMap.get("aa"))
}
function getDictMap() {
const dictMap = new Map<string, DictDatas[]>();
let codes = ['aa', 'bb', 'cc'];
for (const code of codes) {
listByDictTypeCode(code).then(resp => {
dictMap.set(code, resp.data);
})
}
console.log("已经返回" + dictMap.size + "条");
return dictMap;
}
运行结果:
虽然listByDictTypeCode()确实执行了,但是最后的return dictMap在listByDictTypeCode()执行完成之前就已经返回了,所以myFunction()里没有获取到字典值。
2 使用async和await来解决
function myFunction() {
const dictMap = getDictMap();
dictMap.then(result => {
console.log("aa的值 = " + result.get("aa"))
})
}
async function getDictMap() {
const dictMap = new Map<string, DictDatas[]>();
let codes = ['aa', 'bb', 'cc'];
for (const code of codes) {
await listByDictTypeCode(code).then(resp => {
dictMap.set(code, resp.data);
})
}
console.log("已经返回" + dictMap.size + "条");
return dictMap;
}
运行结果:
从结果可以看到,是等待listByDictTypeCode()都执行完成后,再return dictMap的。
更多推荐
已为社区贡献22条内容
所有评论(0)