Why am i getting [Object Promise], how to work with a promise - api

Question

I am new to Vue.js and Axios. Working with a promise always confuses me.
Can anyone guide me here. I am calling an API looking for an access_token.
I want to store this token and use it in a separate different API call.
I have tried variations of axios, fetch, request, syn-request. Axios is what i want to use.
<template>
<div class="col-xs-6">
<label>Access Token:</label>
<input type="text" name="name1" v-model="token">
</div>
</template>
<script>
import axios from 'axios'
/* eslint-disable */
export default {
data () {
return {
token: ''
}
},
mounted () {
this.token = this.displayAccessToken()
console.log('token:'+this.token)
},
methods: {
displayAccessToken(){
function getAccessToken(){
return axios({
method: 'POST',
'url': 'my_api_end_point',
'auth': {
'username': 'my_username',
'password': 'my_password'
},
'headers': {
'content-type': 'application/json'
}
}).then(function(response) {
console.log('response:' + response)
return response.data.access_token;
});
}
async function saveToken(){
let output = await getAccessToken()
return output
}
return saveToken();
}
}
}
</script>

Answer 1

I believe you are overcomplicating the response fetching process. See if the following adjustments help, and please be sure to only call the next APIs subsequently (right after this token is set), that is when the first Promise is resolved.
export default {
data () {
return {
token: ''
}
},
async mounted () {
await this.displayAccessToken();
console.log('token:' + this.token);
},
methods: {
async displayAccessToken() {
this.token = await axios({
method: 'POST',
'url': 'my_api_end_point',
'auth': {
'username': 'my_username',
'password': 'my_password'
},
'headers': {
'content-type': 'application/json'
}
})
.then(function(response) {
console.log('response:' + response);
return response.data.access_token;
});
}
}
}
Also, if all this method does is returning a token, I would probably make it a void function and call the method setAccessToken instead, but of course that would depend on your use case.