快捷導(dǎo)航

Vue3異步數(shù)據(jù)加載組件suspense的使用方法

更新時間：2021年08月05日 09:01:51 作者：天行無忌

前端開發(fā)中異步請求是非常常見的事情,比如遠(yuǎn)程讀取圖片,調(diào)用后端接口等等,這篇文章主要給大家介紹了關(guān)于Vue3異步數(shù)據(jù)加載組件suspense的使用方法,suspense中文含義是懸念的意思,需要的朋友可以參考下

前言

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

通常組件在正確呈現(xiàn)之前需要執(zhí)行某種異步請求是很常見的，通常是通過設(shè)計一種機(jī)制開發(fā)人員按照機(jī)制處理這個問題，有很多很好的方法實現(xiàn)這個需求。

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

創(chuàng)建組件

創(chuàng)建一個組件并將其命名為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 以確保組件狀態(tài)的反應(yīng)性。因此，根據(jù)上面的代碼片段，通過異步 API 調(diào)用獲取電影數(shù)據(jù)。
對于VUE項目中發(fā)起 HTTP 請求，通常是使用 Axios ，這里嘗試使用 fetch 。

好的，現(xiàn)在就來使用 suspense 在應(yīng)用程序內(nèi)顯示數(shù)據(jù)加載中的信息。

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

<template>
    <div>
        <h1>星球大戰(zhàn)人物</h1>
    </div>
    <suspense>
        <template #default>
            <CyPeoples />
        </template>
        <template #fallback>
            <div>
                <h3>數(shù)據(jù)加載中……</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 可以很簡單就實現(xiàn)了 loading 的效果，帶有 #default 為初始化模板組件，顯示異步請求完成之后的 UI 。帶有 #fallback 為異步請求中的處理 UI ，即常見的 loading 效果。