After fetching api with axios it sometimes returns undefined under certain conditions

Question

 <template>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
            <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">{{coin.data.name}} Price Statistics</div>
                <table class="table-fixed">
                    <tbody>
                        <tr>
                            <th>Price</th>
                            <td>{{coin.data.market_data.current_price.usd}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </template>
    
    <script setup>
    import { api } from '../services/api'
    import { reactive } from 'vue'
    
    const props = defineProps(['coinId'])
    
    const coin = reactive({
        data: []
    });
    
    async function fetchData() {
      try {
        coin.data = await api.get(`/coins/${props.coinId}`)
            .then((response) => {
                return response.data;
            })
      }
      catch (e) {
        console.error(e)
      }
    }
    
    fetchData()
    
    
    </script>

Hey guys, i'm struggling a lot trying to read data from an api. So, im reading this data from coingecko and when it's just on the first array it works very well. But when its an array inside an array its returns undefined when i try to refresh the page. But while i'm coding and it auto updates, it works very well. How can i treat it and make it so it doesn't show up undefined before anything?

Showing up an error While coding and it just auto refreshes

score 0 · Answer 1 · answered Jul 18 '22 at 05:31

This is probably caused by the data from the api not being received when you load the table. You can fix this by adding a loading variable, which you only set to true when the api call is finished. You can use v-if to toggle the element that uses the data so it only shows when the data is available and otherwise show 'loading...'. Like:

<template>
        <div v-if="loading" class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
            <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">{{coin.data.name}} Price Statistics</div>
                <table class="table-fixed">
                    <tbody>
                        <tr>
                            <th>Price</th>
                            <td>{{coin.data.market_data.current_price.usd}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div v-else-if="error !== ''">{{ error }}</div>
    <div v-else>Loading...</div>
</template>

<script setup>
import { api } from '../services/api'
import { ref, reactive } from 'vue'

const props = defineProps(['coinId'])

const coin = reactive({
    data: []
});

const loading = ref(false);
const error = ref('');

async function fetchData() {
  try {
    const response = await api.get(`/coins/${props.coinId}`);
    /// here you could check if response is valid for you, otherwise throw an error
    coin.data = response;
    loading.value = false;
  }
  catch (e) {
    error.value = e;
    console.error(e)
  }
}

fetchData()


</script>

You could also use the experimental Suspense component for this.

There is also another problem with your code: you use async/await and .then together. You should not do that, just pick one way or the other to deal with promises.

Hope this helps.

After fetching api with axios it sometimes returns undefined under certain conditions

1 Answers1