반응형 비동기 요청 상태
13921 단어 webdevhtmlprogrammingjavascript
내가 제대로 했는지 누가 말해 줄 수 있니?
<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>
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,
};
};
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,
};
}
Reference
이 문제에 관하여(반응형 비동기 요청 상태), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/arnosolo/responsive-asynchronous-request-status-39ee텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)