Back

Technologies:

javascriptjavascript
vue.jsvue.js
avatar
Tolerim
a month ago

How can one create a Promise object in Vue.js?

The post contains links to similar questions which have already been answered. Additionally, there is a code snippet that uses an asynchronous function to retrieve a player's name but returns a Promise instead of the actual name in the paragraph tag. The issue is addressed in the console.log statement but needs resolving for the paragraph tag output. The post author has not attempted any solutions yet.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
It seems like you are having trouble retrieving a player's name from an asynchronous function in JavaScript. You mentioned that the code snippet uses an asynchronous function to retrieve a player's name but returns a Promise instead of the actual name in the paragraph tag. The issue is addressed in the console.log statement but needs resolving for the paragraph tag output. You can use the async/await syntax to retrieve the player's name from the asynchronous function. Here is an example of how you can use it: 
async function getPlayerName() {
  const response = await fetch('https://example.com/player');
  const data = await response.json();
  return data.name;
}

getPlayerName().then(name => {
  document.querySelector('p').textContent = name;
});
This code snippet retrieves the player's name from an asynchronous function using async/await syntax and sets it as the text content of a paragraph element. I hope this helps! Let me know if you have any other questions.

Sources

async function - JavaScript | MDN - Mozilla Developerjavascript - How to return values from async functions using async ...How to access a variable from an asynchronous function in Javascript ...
avatar
Tolerim
a month ago
The reason why you get "[Object Promise]" in your paragraph tag is because the getPlayerName() function is an asynchronous function and returns a Promise object. To get the actual value returned by the Promise, you need to wait for it to resolve using either the await keyword or the .then() method. Here's an example of how you can modify your code to wait for the Promise to resolve before displaying the player name in the paragraph tag: 
<template>
  <div>
    <p>{{ playerName }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      log: { id: 'player_uuid_here' },
      playerName: '',
    };
  },
  async created() {
    this.playerName = await this.getPlayerName(this.log.id);
  },
  methods: {
    async getPlayerName(uuid) {
      try {
        const response = await axios.get(`http://localhost:8080/apis/mojang/gprofile/${uuid}`);
        return response.data.name;
      } catch (error) {
        console.error(error);
        return '';
      }
    },
  },
};
</script>
In this example, we create a playerName data property to hold the value returned by the getPlayerName() method. We also use the async created() lifecycle method to call the getPlayerName() method and wait for the Promise to resolve before setting the playerName property to the returned value. Finally, we display the playerName property in the paragraph tag using {{ playerName }}. Note that we are using a Vue.js component in this example but the same principles apply to plain HTML/CSS/JS as well.
;