how do you use useFetch() in a page (options api)

hello, I am working on a website in nuxt that needs to load data from somewhere else. I got that part working in a way that i liked it and made a util to try to make it easier.

it worked perfectly in my little testing page that used the vue composition api, but i cannot get it working anywhere else where i use the options api. I don't know the composition api well and would prefer to not relearn everything for this.

here is the util that i'm using:

export default async function requestData(service, json, onResponseFunction) {
    json.service = service
    const { data } = await useFetch('http://192.168.0.11:8002/example', {
        headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(json),
        method: "POST",
        lazy: false,
        server: true,
        onResponse({ request, response, options }) {
            console.log("here")
            onResponseFunction(response._data)
            console.log(response._data)
        }
    })
    return data
}

export default async function requestData(service, json, onResponseFunction) {
    json.service = service
    const { data } = await useFetch('http://192.168.0.11:8002/example', {
        headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(json),
        method: "POST",
        lazy: false,
        server: true,
        onResponse({ request, response, options }) {
            console.log("here")
            onResponseFunction(response._data)
            console.log(response._data)
        }
    })
    return data
}

here is the page where it works:

<template>
    <div>
      <pre>{{ data }}</pre>
    </div>
</template>

<script setup>
    let data
    await requestData("KitGet", {}, function(e) {
      data = e
    })
</script>

<template>
    <div>
      <pre>{{ data }}</pre>
    </div>
</template>

<script setup>
    let data
    await requestData("KitGet", {}, function(e) {
      data = e
    })
</script>

is there any way to do this in the options api?

how do you use useFetch() in a page (options api)

export default async function requestData(service, json, onResponseFunction) {
    json.service = service
    const { data } = await useFetch('http://192.168.0.11:8002/example', {
        headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(json),
        method: "POST",
        lazy: false,
        server: true,
        onResponse({ request, response, options }) {
            console.log("here")
            onResponseFunction(response._data)
            console.log(response._data)
        }
    })
    return data
}

export default async function requestData(service, json, onResponseFunction) {
    json.service = service
    const { data } = await useFetch('http://192.168.0.11:8002/example', {
        headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(json),
        method: "POST",
        lazy: false,
        server: true,
        onResponse({ request, response, options }) {
            console.log("here")
            onResponseFunction(response._data)
            console.log(response._data)
        }
    })
    return data
}

here is the page where it works:

<template>
    <div>
      <pre>{{ data }}</pre>
    </div>
</template>

<script setup>
    let data
    await requestData("KitGet", {}, function(e) {
      data = e
    })
</script>

<template>
    <div>
      <pre>{{ data }}</pre>
    </div>
</template>

<script setup>
    let data
    await requestData("KitGet", {}, function(e) {
      data = e
    })
</script>

is there any way to do this in the options api?

how do you use useFetch() in a page (options api)

Similar Threads

how do you use useFetch() in a page (options api)

Similar Threads

Similar Threads

Similar Threads