DEV Community 👩‍💻👨‍💻

Cover image for Responsive asynchronous request status
Arno Solo
Arno Solo

Posted on

Responsive asynchronous request status

Can anyone tell me did I did it right?

  1. pages/products.vue
<template>
        <div v-if="fetchDataState.isFetching" py-4 w-full flex justify-center>
            <spinner />
        </div>
        <div v-else-if="fetchDataState.isFailed" text-center py-4>
            Load failed
        </div>
        <product-list v-else :products="products" />
</template>

<script setup lang="ts">
    const { products, fetchDataState } = useProductsByCatalog();
</script>
Enter fullscreen mode Exit fullscreen mode
  1. composables/useProductsByCatalog.ts
    export function useProductsByCatalog(catalogId: string) {
    const { products, setProducts } = useProducts();
    const { fetchDataState } = useFetchDataState();

    onMounted(() => {
        fetchDataState.isFetching = true;
        setTimeout(() => {
            fetchDataState.isSuccess = true;
            setProducts(xxx)
            }, 1000);
    });

    return {
        products,
        fetchDataState,
    };
    };
Enter fullscreen mode Exit fullscreen mode
  1. composables/useFetchDataState.ts
enum AsyncReqState {
    beforeReq,
    waitRes,
    success,
    failed,
}

class FetchDataState {
    reqState: AsyncReqState;
    constructor() {
        this.reqState = AsyncReqState.beforeReq;
        this.isFetching = false;
    }

    set isBeforeReq(newVal: boolean) {
        if (newVal) {
            this.reqState = AsyncReqState.beforeReq;
        }
    }

    get isBeforeReq() {
        return this.reqState === AsyncReqState.beforeReq;
    }

    set isFetching(newVal: boolean) {
        if (newVal) {
            this.reqState = AsyncReqState.waitRes;
        }
    }

    get isFetching() {
       return this.reqState === AsyncReqState.waitRes;
    }


    set isSuccess(newVal: boolean) {
        if (newVal) {
            this.reqState = AsyncReqState.success;
        }
    }

    get isSuccess() {
        return this.reqState === AsyncReqState.success;
    }


    set isFailed(newVal: boolean) {
        if (newVal) {
           this.reqState = AsyncReqState.failed;
        }
    }

    get isFailed() {
        return this.reqState === AsyncReqState.failed;
    }
}

export function useFetchDataState() {
    const fetchDataState = reactive<FetchDataState>(new FetchDataState());

    return {
        fetchDataState,
    };
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!