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

前言

在开发中，我们经常会遇到需要等待异步操作结果的情况。由于异步操作的执行时间不确定，很有可能导致出现各种各样的问题，这个时候就需要使用异步函数和 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>

• 控制台打印结果