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

Enhancing the Calculator Functionality in a React Program

Utilizing the power of JavaScript in an HTML file to develop a straightforward price calculator

jQuery failing to append code after being removed

Javascript use of overlaying dynamically generated Canvases

The rotation of Google Maps always returns to its default position when I open the map information window by clicking on it

Vue.js Issue: Image not properly redirected to backend server

Is it possible to combine Ajax, JS, HTML, PHP, and MySQL in a single project?

Error in Babel-Loader when executing npm run build

Struggling to set up the connection between React-Redux connect and the Provider store

What is the alternative to $templateCache in Angular2 and how can CachedResourceLoader be utilized in its place?

JavaScript is throwing an error stating that the requestData is undefined, even though the

Cancel promise chain after action dispatch (rxjs)

The output from the NodeJS storage module function

JavaScript taking over the HTML footer content

The CORS problem arises only in production when using NextJS/ReactJS with Vercel, where the request is being blocked due to the absence of the 'Access-Control-Allow-Origin' header

Using Laravel's compact function within Vue components

Difficulty encountered in closing dialog box upon clicking NavLink in React

TypeScript does not perform type checking on arrays created using the Array() constructor and filled with the fill method

Changing pricing on pricing table with a click

Extract a specific pattern from a string using Javascript

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

Concerning state.test

Answer №1

Answer №2

Answer №3

Similar questions

Enhancing the Calculator Functionality in a React Program

Utilizing the power of JavaScript in an HTML file to develop a straightforward price calculator

jQuery failing to append code after being removed

Javascript use of overlaying dynamically generated Canvases

The rotation of Google Maps always returns to its default position when I open the map information window by clicking on it

Vue.js Issue: Image not properly redirected to backend server

Is it possible to combine Ajax, JS, HTML, PHP, and MySQL in a single project?

Error in Babel-Loader when executing npm run build

Struggling to set up the connection between React-Redux connect and the Provider store

What is the alternative to $templateCache in Angular2 and how can CachedResourceLoader be utilized in its place?

JavaScript is throwing an error stating that the requestData is undefined, even though the

Cancel promise chain after action dispatch (rxjs)

The output from the NodeJS storage module function

JavaScript taking over the HTML footer content

The CORS problem arises only in production when using NextJS/ReactJS with Vercel, where the request is being blocked due to the absence of the 'Access-Control-Allow-Origin' header

Using Laravel's compact function within Vue components

Difficulty encountered in closing dialog box upon clicking NavLink in React

TypeScript does not perform type checking on arrays created using the Array() constructor and filled with the fill method

Changing pricing on pricing table with a click

Extract a specific pattern from a string using Javascript

Concerning `state.test`