异步函数与await关键字:优化代码逻辑和数据处理

前言

在开发中,我们经常会遇到需要等待异步操作结果的情况。由于异步操作的执行时间不确定,很有可能导致出现各种各样的问题,这个时候就需要使用异步函数和 await 关键字来优化代码逻辑,简化异步操作,并提高代码的可读性和可维护性。


先看下图所示代码

异步函数与await关键字:优化代码逻辑和数据处理_第1张图片

上面这段代码的功能是在组件挂载后调用 simplify 方法,该方法会发送异步请求并根据返回的数据进行处理。在处理过程中,它会调用 findModelByRoleId 方法来查找匹配的模型,并获取对应的 id 值,最后在 simplify() 方法中打印出来。

  • 控制台打印结果

异步函数与await关键字:优化代码逻辑和数据处理_第2张图片


原因分析

可以看到控制台直接打印了 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>
  • 控制台打印结果

异步函数与await关键字:优化代码逻辑和数据处理_第3张图片

你可能感兴趣的:(JS,前端,vue)