반응형 비동기 요청 상태

내가 제대로 했는지 누가 말해 줄 수 있니?


  • 페이지/제품.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>
    


  • 구성 가능/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,
        };
        };
    


  • 컴포저블/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,
        };
    }
    

    좋은 웹페이지 즐겨찾기