getter 方法会等待先前的异步调用完成

Question

我的 JS 文件中有这个：

let xe = 0;

const get_usd2inr = async () =>
{
    return await fetch(BASE_URL + "api/usd")
    .then(response => response.json())
    .then(response =>
    {
        return response;
    });
}

document.addEventListener("DOMContentLoaded", async () =>
{
    xe = await get_usd2inr();
});

Alpine.store('local_data',
{
    // ...

    get ri_total()
    {
        let usd2inr = xe.usd2inr;
        let total = parseFloat(250 * usd2inr).toFixed(2);        
        const formatedNumber = new Intl.NumberFormat('en-IN', { currency: 'INR' }).format(total);
        return formatedNumber;
    }
});

我的 HTML 中有这个，它可能会在 AlpineJS init 之后和 DOMContentLoaded 之前被调用？

<input
    type="text" id="ri-total"
    :value="$store.local_data['ri_total']"
    x-mask-x:dynamic="$money($input)"
    readonly    
/>

当我想要一个数字时，上面的 INPUT 的值是 NaN，即使它是 0。

Answer 1

您可以通过

将其默认为

0

return isNaN(formatedNumber) ? 0 : formatedNumber;