itmaster Posts - Answer Overflow

itmaster

•Created by itmaster on 4/13/2024 in #❓・help

Moving between pages Problem in Nuxt 3.10.03, ssr:false

When moving between pages, the page moves after the API call is completed. Isn't it usually an API call after turning the page? Or is it a problem that I use useAsyncData + $fetch? The "pending" value also does not work in case of a POST request after refresh. I'm sharing my custom composable file.

// composables/useApi.ts
export const useBaseFetch = <T>(url: string, options?: any, query?: any) => {
    const apiBaseUrl = getBaseUrl();
    const route = useRoute()

    const { initialize, ...rest } = (options ?? {});

    const asyncDataOptions: AsyncDataOptions<T> = {}
    const optss = computed(() => {
        const _ = {
            baseURL: apiBaseUrl,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'source': route.fullPath,
            },
            ...rest
        }
        return _
    })
    
    const urlWithQuery = computed(() => query ? `${url}?${serialize(query.value)} ` : url);

    const key = hash(urlWithQuery.value)    
    const _fetch = useAsyncData(key, () => $fetch(urlWithQuery.value, optss.value) as Promise<T>, asyncDataOptions)
    const { setIsLoading } = useStore()
    watch(_fetch.pending, (v) => {
        setIsLoading(v)
    })

    watch(_fetch.error, (e: any) => {
    })
    return _fetch;
}

// composables/useApi.ts
export const useBaseFetch = <T>(url: string, options?: any, query?: any) => {
    const apiBaseUrl = getBaseUrl();
    const route = useRoute()

    const { initialize, ...rest } = (options ?? {});

    const asyncDataOptions: AsyncDataOptions<T> = {}
    const optss = computed(() => {
        const _ = {
            baseURL: apiBaseUrl,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'source': route.fullPath,
            },
            ...rest
        }
        return _
    })
    
    const urlWithQuery = computed(() => query ? `${url}?${serialize(query.value)} ` : url);

    const key = hash(urlWithQuery.value)    
    const _fetch = useAsyncData(key, () => $fetch(urlWithQuery.value, optss.value) as Promise<T>, asyncDataOptions)
    const { setIsLoading } = useStore()
    watch(_fetch.pending, (v) => {
        setIsLoading(v)
    })

    watch(_fetch.error, (e: any) => {
    })
    return _fetch;
}

Thanks

3 replies

NNuxt

•Created by itmaster on 3/19/2024 in #❓・help

Page Move Problem with api call

There are 2 page second page will call api request At that time, when go first page to second page, ended call second page api, move second page but I wanna move second page and then call api what is solution?

1 replies

NNuxt

•Created by itmaster on 3/9/2024 in #❓・help

How to I can make loading with useAsyncdata?

//composable/use-api.ts
export const useBaseFetch = <T>(url: string) => {    
    const { setLoading } = useStore()   
    const _fetch = useAsyncData(key, () => $fetch(urlWithQuery.value)
    watch(_fetch.pending, (v) => {    
        // console.log(v); // always false
        setLoading(v)
    })
    return _fetch;
}

//composable/use-api.ts
export const useBaseFetch = <T>(url: string) => {    
    const { setLoading } = useStore()   
    const _fetch = useAsyncData(key, () => $fetch(urlWithQuery.value)
    watch(_fetch.pending, (v) => {    
        // console.log(v); // always false
        setLoading(v)
    })
    return _fetch;
}

pending value is always false so I can't loading spinner what is my wrong? thanks

7 replies

Gaming

Programming