Vue刷新頁面執行多個axios.post

Question

在App.Vue中，我有以下代碼：

<script>
import axios from "axios";
import { baseApiUrl, userInfo } from "@/global";

export default {
  methods: {
    moveToLoginPage() {
      localStorage.removeItem(userInfo);
      this.$store.commit("setToken", null);
      this.$router.push({ path: "/login" });
    },
    async validateToken() {
      const json = localStorage.getItem(userInfo);
      const userData = JSON.parse(json);
      if (!userData) {
        this.moveToLoginPage();
      } else {
        const url = `${baseApiUrl}/auth/validateToken`;
        const resData = await axios.post(url, userData).then(resp => resp.data);
        if (!resData) {
          this.moveToLoginPage();
        }
      }
    }
  },
  created() {
    this.validateToken();
  }
};
</script>

訪問系統后，我轉到任何其他頁面，並進行刷新。 重新加載頁面后，將執行Vue.app中的此代碼段以驗證localStorage中的令牌。 但是，在我通過validateToken（）函數從服務器獲得響應之前，其他HTTP.GET請求在我在函數mount（）中刷新的頁面中執行。 我希望validateToken（）函數在另一頁的mounted（）函數執行之前完全執行。

Answer 1

您可以像這樣使用async/await ：

async created(){
    await this.validateToken();
    }

這將阻止創建生命周期掛鈎完成，直到validateToken返回響應為止

Answer 2

我假設您在App.vue文件中有一個router-view 。 您可以為異步數據保留一個標志/變量，然后僅在該數據可用時加載router-view 。

<template>
  <router-view v-if="data"></router-view>
</template>

這樣，您的內部子項甚至不會加載，直到您的異步數據可用為止。

這個答案與我對上述問題的評論相同，只是為了將來的人們。