Retrieving data with VueJS using an axios promise

Question

Retrieving data with VueJS using an axios promise

Can you help me figure out this issue?

Snippet :

<a href="#" class="video" @click.prevent="checkVideo(subItem.id)" :id="subItem.id" data-toggle="modal" data-target="#playerModal">{{subItem.name}}<span>{{getDuration(subItem.id)}}</span></a>

VueJS Function :

async getDuration(id) {
    var duration  = '';
    await axios.post('/api/v1/checkvideo', {
    menu: id
    })
    .then(function (response) {
    console.log(response.data[0].datas.duration)
    return response.data[0].datas.duration;
    });

    //console.log(duration);
    //return duration;
},

The question I have is that when using console.log the values appear as expected, but during Vue rendering, I am getting [object Promise]. How can I display the values after the promise has been resolved?

Your assistance would be greatly appreciated.

javascript vue.js

Answer 1

Answer №1

Your code is utilizing axios, which returns a promise object. If you wish to obtain the final duration, it is essential to await the axios promise and return the response accordingly.

async fetchVideoDuration(id) {
  let duration = '';
  const response = await axios.post('/api/v1/checkvideo', {
    menu: id
  });
  return response.data[0].datas.duration;
}

MODIFIED

As the async function inherently returns a promise, rendering [object Promise] may be observed on the screen. To accurately retrieve the duration for a specific identifier, following this approach seems appropriate.

data() {
  return {
    currentId: null,
    videoDuration: null
  };
},
mounted() {
  this.fetchVideoDuration(this.currentId);
},
methods: {
  async fetchVideoDuration(id) {
    let duration = '';
    const response = await axios.post('/api/v1/checkvideo', {
      menu: id
    });
    this.videoDuration = response.data[0].datas.duration;
  }
}

Answer 2

Your code is utilizing axios, which returns a promise object. If you wish to obtain the final duration, it is essential to await the axios promise and return the response accordingly.

async fetchVideoDuration(id) {
  let duration = '';
  const response = await axios.post('/api/v1/checkvideo', {
    menu: id
  });
  return response.data[0].datas.duration;
}

MODIFIED

As the async function inherently returns a promise, rendering [object Promise] may be observed on the screen. To accurately retrieve the duration for a specific identifier, following this approach seems appropriate.

data() {
  return {
    currentId: null,
    videoDuration: null
  };
},
mounted() {
  this.fetchVideoDuration(this.currentId);
},
methods: {
  async fetchVideoDuration(id) {
    let duration = '';
    const response = await axios.post('/api/v1/checkvideo', {
      menu: id
    });
    this.videoDuration = response.data[0].datas.duration;
  }
}

Retrieving data with VueJS using an axios promise

Snippet :

VueJS Function :

Answer №1

MODIFIED

Similar questions

Attempting to use insertAdjacentHTML on a null property results in an error

Discovering unutilized node modules in your React project - A practical guide

Adjusting the size of images with precision after downloading from Google Cloud Storage

Tips for universally updating the FormData TypeScript interface within React Native applications

Conceal (and reveal) hyperlinks as the div's size changes dynamically

What steps should I take when creating a web forum?

Using Vue.js to create a table with dynamically colored rows in a v-for loop

Learn the art of altering Vuex store values dynamically

Issue with Angular 5: Bootstrap Tooltip not functioning as expected

Vanilla JavaScript: toggling text visibility with pure JS

The toast feature in Bootstrap 5 seems to be malfunctioning as it does not display properly despite the absence of any

Traverse through an array or object using recursive render functions in JavaScript

Automate Cart Updates with Increment and Decrement Buttons on the Cart Page of Magento 2 Store

Error: The unit tests encountered a SyntaxError due to an unexpected { token

Extensive data entry command

How can you use Jquery's .data() method to find elements with specific values?

Extract data from ASP.NET session to JavaScript

The variable remains undefined, despite the fact that the code executes correctly in a different location

Tips for invoking a function using ng-model together with the ng-model value

Store the selected checkbox values in an array when submitting in Ionic