javascript - 为什么这个 VueJS 代码是按这个顺序执行的？

Question

我使用 VueJS 编写了以下代码。

我想将 axios 响应存储在会话存储中，这样如果我已经在会话存储中拥有所需的信息（应该包含对象数组），我就可以避免发出 http 请求。

问题是 Vue 组件似乎同时在执行代码，而我的会话存储被第二个组件覆盖，依此类推..

export default {
  data() {
    return {
      isHidden: true,
      user: {},
      paises: {},
      letter: "",
      userColor: "#000",
      top: 0,
      left: 0,
    };
  },
  props: ["usuId"],
  methods: {
    getAll: async function () {
      let usersData = [];

      if (sessionStorage.getItem("usersData")) {
        usersData = JSON.parse(sessionStorage.getItem("usersData"));
      }

      console.log("primer log", usersData, "length", usersData.length);

      const found = usersData.find((e) => e.id == 70);

      console.log("found:", found);

      if (found === undefined) {
        //Si no está en el array traigo los datos y lo guardo
        console.log("No está en el array o el array está vacío");

        await $.ajax({
          url: "/profile-card-api",
          data: { usu_id: this.usuId },
          method: "get",
        }).done(function (response) {
          
          console.log("response", response);
          usersData.push(JSON.parse(response));
          // Save data to sessionStorage
          sessionStorage.setItem("usersData", JSON.stringify(usersData));  
        });

        
      } else {
        //si el usuario está en el array uso esos datos para mostrar
        console.log("Está en el array", usersData);
      }

      /*
      console.log(await this.getUserData(this.usuId))
      this.user = JSON.parse(this.getUserData(this.usuId));
      this.paises = this.user.paises_disponibles.split(",");
      this.letter = this.user.name.charAt(0).toUpperCase();
      this.userColor =
        this.user.role == "admin"
          ? "#f93943"
          : this.user.role == "callcenter"
          ? "#39ba4e"
          : "#3e8ddd";
          */
    },
    mouseOver(event) {
      this.isHidden = false;
      this.top = event.clientY + 10;
      this.left = event.clientX + 10;
    },
  },
  mounted() {
    this.getAll();
  },
};

我在控制台中得到以下信息

primer log [] length 0
profileCard.vue?63d3:125 found: undefined
profileCard.vue?63d3:129 No está en el array o el array está vacío
profileCard.vue?63d3:121 primer log [] length 0
profileCard.vue?63d3:125 found: undefined
profileCard.vue?63d3:129 No está en el array o el array está vacío
2 profileCard.vue?63d3:137 response

如您所见，代码一直执行，直到控制台中显示字符串“No está en el array o el array está vacío”，然后停止执行其他组件，然后您才会得到当时无用的响应。

我错过了什么？先感谢您。

标签： javascriptvue.jsvuejs2async-awaites6-promise