Why do I receive Promise {<pending>} with Vuejs

Question

I have a very simple two methods in Vuejs and it returns me promise pending what I am doing it's this:

TotalIncomeData(day, branch_office_id) {
            return fetch('/api/collection/total/'+day+'/'+branch_office_id+'?api_token='+App.apiToken)
            .then(response => {
                    return response.data;
                }
    );
 },
 getTotalIncomes(day, branch_office_id) {
     console.log(this.TotalIncomeData(day, branch_office_id))
 },

Why am I not getting the value? Thanks

Answer 1

You need to call .json() on the fetch response, and await the result.

And you need to make your function async and await the promise from the first function.

TotalIncomeData(day, branch_office_id) {
  return fetch(...).then(rawResponse => rawResponse.json())
                                                    ^^^^^^ 
 },
 async getTotalIncomes(day, branch_office_id) {
 ^^^^^
     console.log(await this.TotalIncomeData(day, branch_office_id))
                 ^^^^^
 },