async メソッドから[object promise]ではなく指定した値を返す方法

Question

前提・実現したいこと

async メソッドから[object promise]ではなく指定した値を返す方法。
または、(mounted以外で)v-onなど使わずにメソッドを使用する方法

該当のソースコード

async getFavo( id ) {
            try {
                const url = "/ajax/favo/";
                console.log('getFavo');
                
                await axios.get(url + id ).then(response => {
                    this.favo = response.data;
                });
            } catch (error) {
                console.log(error);
            }
        },

<template>
    <div v-for=post in posts>
        <span>{{getFavo(post.id)}}</span><!--[object promise]となる-->
    </div>
</tempate>

<template>
    <div v-for=post in posts>
        <span getFavo(post.id)>{{favo}}</span><!--イベントハンドラを使用せずにメソッドを使用したい-->
    </div>
</tempate>

Answer 1

一般にasyncで指定した関数からはpromiseが返りますので
プリミティブな値や一般的なオブジェクトを戻すことはできません

Comments

[sousuke]

直はたしかにアウトですね、ラップしたらどうなります？async苦手意識あってついていけない…
async function f(id) {
return 1;
}

function b(id) {
setTimeout(()=>{f(id);},1000);
return id;
}

[yambejp]

あまり意味がないですね
bをasyncにしないとsetTimeoutをawaitできないので
結局b()は即座にidを返しているだけです
いまのままだと結局setTimeoutは勝手に非同期で動いているに過ぎません

[sousuke]

サンクスでーす、やっぱpromise直接書くほうが性に合ってるなあ…

Answer 2

ちょっとやばい予感もするけどclassとかにバインドして文字列返したらだめ？

<template>
    <div v-for=post in posts>
        <span :class="getFavo(post.id)">{{favo}}</span><!--イベントハンドラを使用せずにメソッドを使用したい-->
    </div>
</tempate>

            try {
                const url = "/ajax/favo/";
                console.log('getFavo');

                await axios.get(url + id ).then(response => {
                    this.favo = response.data;
                    return id;
                });
            } catch (error) {
                console.log(error);
                return id;
            }

Comments

[bigbox267]

やばいというのは何がやばいのでしょうか？

[sousuke]

methodsでDOM要素に対してasyncで束縛したことないのでなんとなくダメそうな予感。
本来はcreatedとかmountedとかpostsをwatchするとかで一括してやるべきだと思う。

[bigbox267]

その都度データを取得するというようなやり方は普通はしないのですね。