Vue3異步數據加載組件suspense的使用方法

Posted on by

前言

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>
        <h1>星球大戰人物</h1>
    </div>
    <suspense>
        <template #default>
            <CyPeoples />
        </template>
        <template #fallback>
            <div>
                <h3>數據加載中……</h3>
            </div>
        </template>
    </suspense>
</template>
<script>
import CyPeoples from "./components/Peoples.vue";
import { suspense } from "vue";
export default {
    name: "App",
    components: {
        CyPeoples,
        suspense,
    },
};
</script>

從上面的代碼片段中，使用組件 suspense  可以很簡單就實現瞭 loading 的效果，帶有 #default  為初始化模板組件，顯示異步請求完成之後的 UI 。帶有 #fallback 為異步請求中的處理 UI ，即常見的 loading 效果。

總結

suspense 組件為Vue3的一個新特性，簡化異步請求UI的處理邏輯。

到此這篇關於Vue3異步數據加載組件suspense的文章就介紹到這瞭,更多相關Vue3異步數據加載組件suspense內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：