How to use Vue3 asynchronous data loading component suspense

Preface

Vue3 has added many eye-catching features, and the suspense component is one of them. It is very practical for processing asynchronous request data. This article introduces its usage through simple examples. If you are interested in it, you can refer to the official documentation.

It's common for components to need to perform some kind of asynchronous request before they can render correctly, and this is usually handled by a mechanism that developers design to handle this. There are many good ways to do this.

For example, if you want to get data asynchronously from an API and want to display some information, such as a loading effect, when the response data is parsed, you can use the suspense component in Vue3 to perform such requirements.

Creating Components

Create a component and name it Peoples.vue. Its component code is as follows:

<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>

A ref is introduced here to ensure the reactivity of the component state. So, according to the above code snippet, the movie data is fetched through an asynchronous API call.
For initiating HTTP requests in VUE projects, Axios is usually used. Here we try to use fetch.

Ok, now let's use suspense to display loading information in the application.

Modify the App.vue file to make its code as follows:

<template>
    <div>
        <h1>Star Wars Characters</h1>
    </div>
    <suspense>
        <template #default>
            <CyPeoples />
        </template>
        <template #fallback>
            <div>
                <h3>Data loading...</h3>
            </div>
        </template>
    </suspense>
</template>
<script>
import CyPeoples from "./components/Peoples.vue";
import { suspense } from "vue";
export default {
    name: "App",
    components:
        CyPeoples,
        suspense,
    },
};
</script>

From the code snippet above, the loading effect can be easily achieved using the suspense component, with #default as the initialization template component to display the UI after the asynchronous request is completed. The #fallback is the processing UI in the asynchronous request, which is the common loading effect.

Summarize

The suspense component is a new feature of Vue3 that simplifies the processing logic of asynchronous request UI.

This is the end of this article about Vue3 asynchronous data loading component suspense. For more related Vue3 asynchronous data loading component suspense content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!