Vue3中如何使用suspense異步數據加載組件

Vue3中如何使用suspense異步數據加載組件，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

前言

Vue3 增加了很多讓人眼前一亮的特征，suspense 組件就是其中之一，對處理異步請求數據非常實用，本文通過簡單的實例介紹其使用方法，如對其有興趣，可以參閱官方文檔。

通常組件在正確呈現之前需要執行某種異步請求是很常見的，通常是通過設計一種機制開發人員按照機制處理這個問題，有很多很好的方法實現這個需求。

例如，從一個 API 異步獲取數據，并希望在獲取響應數據解析完時顯示一些信息，如 loading 效果，在Vue3中可以使用 suspense 組件來執行這樣的需求。

創建組件

創建一個組件并將其命名為Peoples.vue，其組件代碼如下:

<template>
    <div v-for="(people, index) in peoples.results" :key="index">
        {{ people.name }} {{ people.birth_year }}
    </div>
</template>
<script>
import { ref } from "vue";
export default {
    name: "CyPeoples",
    async setup() {
        const peoples = ref(null);
        const headers = { "Content-Type": "application/json" };
        const fetchPeoples = await fetch("https://swapi.dev/api/people", {
            headers,
        });
        peoples.value = await fetchPeoples.json();
        return { peoples };
    },
};
</script>

這里將引入 ref 以確保組件狀態的反應性。因此，根據上面的代碼片段，通過異步 API 調用獲取電影數據。
對于VUE項目中發起 HTTP 請求，通常是使用 Axios ，這里嘗試使用 fetch 。

好的，現在就來使用 suspense 在應用程序內顯示數據加載中的信息。

修改 App.vue 文件，使其代碼如下：

<template>
    <div>
        <h2>星球大戰人物</h2>
    </div>
    <suspense>
        <template #default>
            <CyPeoples />
        </template>
        <template #fallback>
            <div>
                <h4>數據加載中……</h4>
            </div>
        </template>
    </suspense>
</template>
<script>
import CyPeoples from "./components/Peoples.vue";
import { suspense } from "vue";
export default {
    name: "App",
    components: {
        CyPeoples,
        suspense,
    },
};
</script>

看完上述內容，你們掌握Vue3中如何使用suspense異步數據加載組件的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！