30 lines
913 B
TypeScript
30 lines
913 B
TypeScript
|
import type { UseFetchOptions } from "nuxt/app";
|
||
|
|
|
||
|
|
export async function useAPI<T>(
|
||
|
|
url: string | (() => string),
|
||
|
|
options?: UseFetchOptions<T>
|
||
|
|
) {
|
||
|
|
const prexFixUrlWithApiName = import.meta.env.VITE_API_NAME + url;
|
||
|
|
|
||
|
|
return await useFetch(prexFixUrlWithApiName, {
|
||
|
|
...options,
|
||
|
|
$fetch: useNuxtApp().$api,
|
||
|
|
});
|
||
|
|
|
||
|
|
// when setting lazy:true, we can use pending.
|
||
|
|
// const { data, error, pending } = useFetch(url, {
|
||
|
|
// lazy: true,
|
||
|
|
// });
|
||
|
|
// const { data, error, pending } = useLazyFetch(url);
|
||
|
|
// const { data, error, pending } = useLazyAsyncData(url);
|
||
|
|
}
|
||
|
|
|
||
|
|
// $fetch : very similar like fetch command.
|
||
|
|
// we can use it on client and server the same way.
|
||
|
|
|
||
|
|
// useAsyncData : it does the same thing on the clien and server.
|
||
|
|
// it let us use async data. data that we need to wait to resolced.
|
||
|
|
// export const useApi2 = async (url, options) => {
|
||
|
|
// return await useAsyncData(() => $fetch(url));
|
||
|
|
// };
|