前言
在开发中,我们经常会遇到需要等待异步操作结果的情况。由于异步操作的执行时间不确定,很有可能导致出现各种各样的问题,这个时候就需要使用异步函数和 await 关键字来优化代码逻辑,简化异步操作,并提高代码的可读性和可维护性。
先看下图所示代码
上面这段代码的功能是在组件挂载后调用 simplify
方法,该方法会发送异步请求并根据返回的数据进行处理。在处理过程中,它会调用 findModelByRoleId
方法来查找匹配的模型,并获取对应的 id
值,最后在 simplify()
方法中打印出来。
- 控制台打印结果
原因分析
可以看到控制台直接打印了 undefined
。这段代码拿不到 pids
的原因是因为 findModelByRoleId()
函数是异步的,而在该函数中使用了 then()
方法来处理异步操作的结果。由于异步操作的执行时间不确定,所以在 findModelByRoleId()
函数中的 return id
语句会在异步操作完成之前就执行,导致返回的 id
值为 undefined
。
解决方案
通过使用 async
关键字和 await
关键字处理异步操作的结果,并确保代码的执行顺序是正确的。
- 首先,在
simplify
的异步方法中,使用await
关键字等待simplify({ username: "fd" })
异步操作的结果,并将结果赋值给res
变量; - 接下来,调用
this.findModelByRoleId(res.data.redirectUrl)
方法,并使用await
关键字等待异步操作的结果。这里的this
指向当前组件对象,所以可以直接调用findModelByRoleId
方法; - 在
findModelByRoleId
方法中,同样使用await
关键字等待findModelByRoleId({})
异步操作的结果,并将结果赋值给res
变量; - 然后使用
res.data.find((item) => item.redirect == path)
方法找到符合条件的item
对象,并将其赋值给item
变量; - 最后,判断
item
是否存在,如果存在,则将item.id
赋值给id
变量;
通过使用 async
关键字和 await
关键字,可以在异步操作完成后,按照代码的书写顺序继续执行后续的操作。这样可以确保异步操作的结果正确地被使用,避免了异步操作带来的执行顺序问题。
完整代码
<script>
import { findModelByRoleId } from "@api/list";
import { simplify } from "@api/menuList";
export default {
methods: {
async simplify() {
const res = await simplify({ username: "fd" });
let pids = await this.findModelByRoleId(res.data.redirectUrl);
if (res.code == "10000") {
console.log(pids, "pids");
}
},
async findModelByRoleId(path) {
let id;
const res = await findModelByRoleId({});
const item = res.data.find((item) => item.redirect == path);
if (item) {
id = item.id;
}
return id;
},
},
mounted() {
this.simplify();
},
};
</script>
- 控制台打印结果