目錄

• 前言
• 建立元件
  
• 總結
  

前言

3 增加了很多讓人眼前一亮的特徵，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/on" };
        const fetchPeoples = await fetch("https://swapi.dev/api/people",{
            headers,});
        peoples.value = await fetchPeoples.json();
        return { peoples };
    },};
</script>

這裡將引入www.cppcns.com ref 以確保元件狀態的反應性。因此，根據上面的程式碼片段，通過非同步 API 呼叫獲取電影資料。

好的，現在就來使用 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非同步資料http://www.cppcns.com載入元件suspense的文章就介紹到這了,更多相關Vue3非同步資料載入元件suspense內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！