快捷導(dǎo)航

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

更新時(shí)間：2021年08月05日 09:01:51 作者：天行無(wú)忌

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

前言

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

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

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

創(chuàng)建組件

創(chuàng)建一個(gè)組件并將其命名為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ù)上面的代碼片段，通過(guò)異步 API 調(diào)用獲取電影數(shù)據(jù)。
對(duì)于VUE項(xiàng)目中發(fā)起 HTTP 請(qǐng)求，通常是使用 Axios ，這里嘗試使用 fetch 。

好的，現(xiàn)在就來(lái)使用 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 可以很簡(jiǎn)單就實(shí)現(xiàn)了 loading 的效果，帶有 #default 為初始化模板組件，顯示異步請(qǐng)求完成之后的 UI 。帶有 #fallback 為異步請(qǐng)求中的處理 UI ，即常見(jiàn)的 loading 效果。

總結(jié)

suspense 組件為Vue3的一個(gè)新特性，簡(jiǎn)化異步請(qǐng)求UI的處理邏輯。

到此這篇關(guān)于Vue3異步數(shù)據(jù)加載組件suspense的文章就介紹到這了,更多相關(guān)Vue3異步數(shù)據(jù)加載組件suspense內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: