Utilize Vue 3 for setting up reactive fetching with asynchronous JSON handling

Question

Utilize Vue 3 for setting up reactive fetching with asynchronous JSON handling

I recently upgraded to Vue 3 and I'm trying to populate a reactive object by fetching data from a JSON API.

Here's how my component looks. Surprisingly, I am not encountering any errors but the expected results are not showing up either.

<template>
  <div>
    {{ state.test.total }}
  </div>
</template>

<script>
import { reactive } from "vue";

export default {
  setup() {
    const state = reactive({
      test: null,
    });

    state.test = async () => {
      return await fetch("https://api.npms.io/v2/search?q=vue");
    };

    return {
      state,
    };
  },
};
</script>

The expectation was to display a number on the screen as per the total field in the JSON data.

Concerning `state.test`

When I tried outputting just state.test, this is what I got:

function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }

Do you have any suggestions on how to overcome this hurdle?

javascript vue.js async-await vuejs3 vue-composition-api

Answer 1

Answer №1

When you write:

a = async function test() {
}

You're setting a function to your state. However, if you write

a = (async function test() {
})();

You are still assigning a promise to a, not a value. To assign a value, you need to resolve the promise like this:

funcResult = await a;

The setup function is not appropriate for code that needs to run during the component's lifecycle. The setup function acts as a factory for your component and should always be synchronous (no async keyword) so Vue knows what to display while setup resolves. You can utilize hooks in the composition API instead:

import { onMounted, reactive } from "vue";

export default {
  setup() {
    const state = reactive({
      test: null,
    });

    onMounted(async () => {
      const response = await fetch("https://api.npms.io/v2/search?q=vue");
      state.test = await response.json();
    });

    return {
      state,
    };
  },
};

EDIT

Based on @boussadjra-brahim's answer, you can define an async setup function only if you wrap your component with <Suspense>. So you have these two options to choose from.

Answer 2

When you write:

a = async function test() {
}

You're setting a function to your state. However, if you write

a = (async function test() {
})();

You are still assigning a promise to a, not a value. To assign a value, you need to resolve the promise like this:

funcResult = await a;

The setup function is not appropriate for code that needs to run during the component's lifecycle. The setup function acts as a factory for your component and should always be synchronous (no async keyword) so Vue knows what to display while setup resolves. You can utilize hooks in the composition API instead:

import { onMounted, reactive } from "vue";

export default {
  setup() {
    const state = reactive({
      test: null,
    });

    onMounted(async () => {
      const response = await fetch("https://api.npms.io/v2/search?q=vue");
      state.test = await response.json();
    });

    return {
      state,
    };
  },
};

EDIT

Based on @boussadjra-brahim's answer, you can define an async setup function only if you wrap your component with <Suspense>. So you have these two options to choose from.

Answer 3

Answer №2

I believe that it's more advantageous to avoid delaying things.

Instance:

<template>
    <div>
        {{ result }}
    </div>
</template>


<script>
import { ref } from 'vue';

export default {
    setup() {
        const result = ref({});

        fetch('https://api.npms.io/v2/search?q=vue')
            .then(response => response.json())
            .then(data => result.value = data);

        return { result };
    },
};
</script>

Answer 4

I believe that it's more advantageous to avoid delaying things.

Instance:

<template>
    <div>
        {{ result }}
    </div>
</template>


<script>
import { ref } from 'vue';

export default {
    setup() {
        const result = ref({});

        fetch('https://api.npms.io/v2/search?q=vue')
            .then(response => response.json())
            .then(data => result.value = data);

        return { result };
    },
};
</script>

Answer 5

Answer №3

To enhance the functionality, make sure to include the async keyword in the setup option and use await within the fetch function. Additionally, wrap the child component with a Suspense component inside the parent component:

<template>
    <div>
      {{ state.test.total }}
    </div>
</template>

<script>
import { reactive } from "vue";
export default {
  async setup() {
    const state = reactive({
      test: null,
    });

    try{
      state.test =  await fetch("https://api.npms.io/v2/search?q=vue");
     } catch (err) {
       console.error(err)
   }

    return {
      state,
    };
  },
};

Within the parent component:

<template>
  <Suspense>
    <Child/>
  </Suspense>
</template>

Answer 6

To enhance the functionality, make sure to include the async keyword in the setup option and use await within the fetch function. Additionally, wrap the child component with a Suspense component inside the parent component:

<template>
    <div>
      {{ state.test.total }}
    </div>
</template>

<script>
import { reactive } from "vue";
export default {
  async setup() {
    const state = reactive({
      test: null,
    });

    try{
      state.test =  await fetch("https://api.npms.io/v2/search?q=vue");
     } catch (err) {
       console.error(err)
   }

    return {
      state,
    };
  },
};

Within the parent component:

<template>
  <Suspense>
    <Child/>
  </Suspense>
</template>

Utilize Vue 3 for setting up reactive fetching with asynchronous JSON handling

Concerning `state.test`

Answer №1

Answer №2

Answer №3

Similar questions

Performing a function when text is clicked: Utilizing AngularJS

Effective ways to replace an image using JavaScript

Is there a way to resolve the issue of Vue's v-html not supporting promises, etc.? It seems that all Vue binding values do not support promises

Managing JavaScript events in the console

Having issues with Next.js when trying to access elements using document.getElementById

How to extract information from a JavaScript object array in Node.js?

What measures can be taken to safeguard my web app from unauthorized devices attempting to connect?

Node.js process.exec() function allows you to asynchronously spawn a subprocess

What is the best way to retrieve the values of a select element from LEVEL 4 within the form submission of LEVEL 3?

Various concatenated and compressed JavaScript files across multiple HTML documents within a single application

Executing a function by clicking on a DIV with the value of a textbox, instead of clicking directly on the textbox

Encountering the issue: "Error: Unable to locate preset "env" in relation to the current directory"

When using React.js with Leaflet, ensure that the useEffect hook is only run on Mount when in the

Error in Javascript chrome when trying to determine the length of an array

What is the purpose of incorporating .prototype within the function?

Unable to bind knockout dropdownlist data during an ajax request

Transmitting information through socket.emit from the client to the server

Switching Bootstrap Navbar Active State with JavaScript

Guidelines on Transferring Variables to a JavascriptExecutor Script

The CSS transition fails to function correctly once a specific function is executed

Utilize Vue 3 for setting up reactive fetching with asynchronous JSON handling

Concerning state.test

Answer №1

Answer №2

Answer №3

Similar questions

Performing a function when text is clicked: Utilizing AngularJS

Effective ways to replace an image using JavaScript

Is there a way to resolve the issue of Vue's v-html not supporting promises, etc.? It seems that all Vue binding values do not support promises

Managing JavaScript events in the console

Having issues with Next.js when trying to access elements using document.getElementById

How to extract information from a JavaScript object array in Node.js?

What measures can be taken to safeguard my web app from unauthorized devices attempting to connect?

Node.js process.exec() function allows you to asynchronously spawn a subprocess

What is the best way to retrieve the values of a select element from LEVEL 4 within the form submission of LEVEL 3?

Various concatenated and compressed JavaScript files across multiple HTML documents within a single application

Executing a function by clicking on a DIV with the value of a textbox, instead of clicking directly on the textbox

Encountering the issue: "Error: Unable to locate preset "env" in relation to the current directory"

When using React.js with Leaflet, ensure that the useEffect hook is only run on Mount when in the

Error in Javascript chrome when trying to determine the length of an array

What is the purpose of incorporating .prototype within the function?

Unable to bind knockout dropdownlist data during an ajax request

Transmitting information through socket.emit from the client to the server

Switching Bootstrap Navbar Active State with JavaScript

Guidelines on Transferring Variables to a JavascriptExecutor Script

The CSS transition fails to function correctly once a specific function is executed

Concerning `state.test`