How do I use promise in an variable assignment statement in a getter function?

JavaScript
1

I have a JavaScript function like this :

let global_get_aws_instance_pricing = async (location, instance, hrs = 730) =>
{
    return fetch(BASE_URL + "api/aws/pricing/instance/" + instance + "/" + location + "?hrs=" + hrs)
    .then(response => response.json())
    .then(response =>
    {
    	let aws_instance_pricing_monthly = 555;
        return aws_instance_pricing_monthly;
    });
}

How do I use it in a getter function that assigns it to a variable :

get aws_total_cost()
{
    let vm_total = global_get_aws_instance_pricing(Alpine.store('global_data').aws['location'], Alpine.store('global_data').aws['instance']);
    return vm_total;
},

problem is, my editor says “The ‘await’ operator can only be used in an ‘async’ function” but Unfortunately, JavasScript syntax does not support asynchronous getters.

2

You’re correct that JavaScript doesn’t support asynchronous getters. However, you can work around this by returning a Promise from your getter and then handling it asynchronously where you use it.

get aws_total_cost()
{
    return global_get_aws_instance_pricing(Alpine.store('global_data').aws['location'], Alpine.store('global_data').aws['instance']);
}

Then, when you use aws_total_cost , you handle it as a Promise:

this.aws_total_cost.then(vm_total => {
    // You can use vm_total here
});

This way, you’re not trying to await the Promise inside the getter (which isn’t allowed), but instead you’re returning the Promise from the getter and then awaiting it where you use the getter. I hope this helps.

3

I forgot to mention that I am using this as a text value in an AlpineJS store data.

Total : $<span x-text="$store.local_data['aws_total_cost']"></span> / mo
4

The issue I’m facing is that I can’t seem to return the result from the promise

get aws_total_cost()
{
    this.aws_vm_cost.then(vm_total =>
    {
        
        let total_cost = (
        parseFloat(vm_total) * 5                
        ).toFixed(2);
        
        return total_cost; // This is not getting returned
    });
},
5

for those who end up here searching - solution :

get aws_total_cost()
{
	return new Promise((resolve, reject) =>
	{
	    this.aws_vm_cost.then(vm_total =>
	    {
	        
	        let total_cost = (
	        parseFloat(vm_total) * 5
	        ).toFixed(2);
	        
	        resolve(total_cost);
	    });

	});	
}
1 Like
6

I am glad you find it this way, I would highly recommend you to add a .catch() block. By doing this can handle any errors that might occur during the execution of your Promise. Best of Luck!!

7

I know you have found a solution, but this link might be of interest.

8

Is there no proposal of native async getter / setter in 2023/2024 ?

9

I don’t see anything here, and I confess I don’t fully understand why it isn’t a proposal.

There is a discussion about async/await getters here, which is possibly worth a read.

I get the impression there is a reason behind this not being implemented — One of the comments from that discussion, which stood out to me

I know C# has this same restriction for their async/await feature, though I’m unclear what the exact rationale for the limitation there is.

For now it seems work arounds are your only choice.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.