phundrak.com/content/.vuepress/components/ApiLoader.vue

66 lines
1.5 KiB
Vue
Raw Normal View History

<template>
<Cache
:name="props.cacheName"
:callback="fetchData"
:already-known-data="alreadyKnownData"
@cached="processCachedData"
/>
2023-05-08 01:34:48 +00:00
<slot v-if="loading" name="loader">
<Loader />
</slot>
2023-05-08 16:04:30 +00:00
<slot v-else-if="error" name="error">
<Error :url="props.url" />
</slot>
2023-05-08 16:04:30 +00:00
<slot v-else> </slot>
</template>
<script setup lang="ts">
import Cache from './Cache.vue';
2023-05-08 01:34:48 +00:00
import Loader from './Loader.vue';
2023-05-08 16:04:30 +00:00
import Error from './Error.vue';
import { Ref, ref } from 'vue';
import { Observable, catchError, switchMap, throwError } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
const props = defineProps({
url: {
default: false,
required: true,
type: String,
},
cacheName: {
required: true,
type: String,
},
alreadyKnownData: Object,
});
const emits = defineEmits(['dataLoaded', 'dataError', 'loading']);
const error: Ref<Error> = ref(null);
const loading: Ref<boolean> = ref(true);
const fetchData = (): Observable<any> => {
return fromFetch(props.url).pipe(
switchMap((response: Response) => response.json()),
2023-05-08 16:04:30 +00:00
catchError((errorResponse: Error) => {
error.value = errorResponse;
return Error;
})
);
};
const processCachedData = (data: Observable<any>) => {
data.subscribe({
next: (response: any) => {
loading.value = false;
emits('dataLoaded', response);
},
error: (responseError: Error) => {
loading.value = false;
error.value = responseError;
},
});
};
</script>