AxelSorensen Comments - Answer Overflow

Thanks @Mähh I would really like to not have to initialize my variables as objects with pending and data keys as this clutters the code. My dream scenario is simply that I can somehow check if a variable is currently in a "fetching state" For example imagine:

let data = 'Hello'
data = await someFunctionThatReturnsWorldAfter1Second

let data = 'Hello'
data = await someFunctionThatReturnsWorldAfter1Second

I wonder whether a value that is currently being assigned with await has some kind of metadata associated with it that I could query to trigger my loading animation.

30 replies

NNuxt

•Created by AxelSorensen on 7/18/2024 in #❓・help

Automatic pending state for data being fetched?

I would like the message variable to reveal a pending state when awaiting assignment. I tried checking whether my variable == Promise, but this didn't work

30 replies

NNuxt

•Created by AxelSorensen on 7/18/2024 in #❓・help

Automatic pending state for data being fetched?

Thanks a lot! This looks promising Do you think that a variable that is currently being assigned to an awaited fetch has some tell? For example:

<template>
  <div>
    <button @click="handleClick">Click me</button>
    <p v-if="message.pending">Loading</p>
    <p v-else>{{ message }}</p>
  </div>
</template>

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

// Create a reactive reference to hold the message
const message = ref('');

// Define the async function
const fetchMessage = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Hello World');
    }, 1000);
  });
};

// Handle the button click event
const handleClick = async () => {
  message.value = await fetchMessage();
};
</script>

<template>
  <div>
    <button @click="handleClick">Click me</button>
    <p v-if="message.pending">Loading</p>
    <p v-else>{{ message }}</p>
  </div>
</template>

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

// Create a reactive reference to hold the message
const message = ref('');

// Define the async function
const fetchMessage = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Hello World');
    }, 1000);
  });
};

// Handle the button click event
const handleClick = async () => {
  message.value = await fetchMessage();
};
</script>

30 replies

NNuxt

•Created by AxelSorensen on 7/18/2024 in #❓・help

Automatic pending state for data being fetched?

Take a look at my example in my post: I want a wrapper around any data, that will show the data if it is fetched or default to a loading indicator. This would mean that in my main app I could handle all the data fetching and as long as i wrap my data in this wrapper: <wrapper>{{data}}</wrapper> or pass it as a prop <wrapper :data="data"/> Would show "loading" or "data" depending on the fetchstate of the given data

30 replies

NNuxt

•Created by AxelSorensen on 7/18/2024 in #❓・help

Automatic pending state for data being fetched?

Right, but what I would really love is to automatically detect that data is being awaited and whenever it is, display some arbitrary loading indicator. I know this can be done with <Suspense/> in React for example, but again this only applies to first time the data is being fetched it seems

30 replies

NNuxt

•Created by AxelSorensen on 7/18/2024 in #❓・help

Automatic pending state for data being fetched?

But this doesn't solve the issue of having multiple pending variables if I have 100 different fields that I need to fetch with each their "loading" fallback text.

30 replies

NNuxt

•Created by AxelSorensen on 7/18/2024 in #❓・help

Automatic pending state for data being fetched?

30 replies

Gaming

Programming