Vue3-onMounted-方法块内异步函数之后的代码为什么一定要等到异步函数返回了再继续执行，程序给人阻塞的感觉？

Question

问题

如下这个方法是一个异步执行，3s的定时器延时，这句代码写在mounted周期函数里，然而这句代码之后的 代码都要等这句异步代码执行完成 再执行 是什么原因，请教下原型方面是怎么样子的，为什么这么执行，

 gameList.value = await useGameState.queryGameList("01")

如上代码执行完成，再调用下方代码

const useMessageState = useMessage()
console.log("useMessageState", useMessageState);
console.log("useMessageState.geeting", useMessageState.geeting);

代码

<template>
  <div>
    <h3>mitt通讯实例</h3>
    <BrotherVue></BrotherVue>
    <LittleBrotherVue></LittleBrotherVue>
  </div>
</template>

<script lang="ts">
import bus from '@/libs/bus'
import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
import BrotherVue from './Brother.vue';
import LittleBrotherVue from './LittleBrother.vue';
import { useUser, useGame, useMessage } from '@/pinia'
import type { gameItem } from "@/types"

export default defineComponent({
  components: {
    BrotherVue,
    LittleBrotherVue
  },
  setup() {
    const sayHi = (msg: unknown | string = 'hello world!'): void => {
      console.log(msg);
    }

    bus.on('sayHi', sayHi)

    onBeforeUnmount(() => {
      bus.off('sayHi', sayHi)
    })

    onMounted(async () => {
      const useUserState = useUser()

      console.log("useUserState==", useUserState);

      const useGameState = useGame();

      const gameList = ref<gameItem[]>([])

      gameList.value = await useGameState.queryGameList("01")
      console.log("gameList", gameList);

      console.log("gameList.value", gameList.value);
      const useMessageState = useMessage()

      console.log("useMessageState", useMessageState);
      console.log("useMessageState.geeting", useMessageState.geeting);



    })


    return {}
  }
})
</script>

<style scoped>

</style>

依赖代码

gameList.value = await useGameState.queryGameList("01")

import { defineStore } from 'pinia'
import type { gameItem } from "@/types"
export const useGame = defineStore('store_game', {
  state: () => ({
    name: 'super men gogogo!',
    preCompany: 'USA',
    money: 300
  }),

  actions: {
    async updateMoney(num: number): Promise<string> {
      return new Promise((resolve) => {
        setTimeout(() => {
          this.money = num;
          resolve('Async done.')
        }, 3000)
      })
    },

    updateMoneySync(num: number): string {
      this.money = num;
      return 'Sync done.'
    },

    queryGameList(userId: string): Promise<gameItem[]> {
      return new Promise((resolve, reject) => {
        if (userId === "01") {
          setTimeout(() => {
            let list = [
              {
                name: "jskj",
                preCompany: "toky",
                money: 348
              },
              {
                name: "opal",
                preCompany: "fkfk",
                money: 888
              }
            ]
            resolve(list)
          }, 3000)
        } else {
          reject({ code: "9999", description: "错误" })
        }
      })
    }
  }
})

export default useGame

Answer 1

因为你添加了 await 啊，自然就会等待 useGameState.queryGameList 执行完毕之后再往下执行。
async/await 的作用就是把异步执行变成类似于同步执行的效果。

相关阅读

async 函数 - JavaScript | MDN