vue.js データから取得した値がObjectになる

Question

Vue.js,typescriptを使って開発をしています。

わからないこと
this.getShereCodeでデータから取得したデータをparamに入れて${env.BASE_URL}+?param=${param}で返してあげているのですが
console.log(param)で確認したところconst paramの中にはデータから取得した値が入っているのですがretun ${env.BASE_URL}+?param=${param}で返されたparamは[object Promise]というのになっていました。
どうやって直したらいいのでしょうか？
わかる人いましたらご教授お願いしたいです。

  ShareUrl() {
    const param = this.getShareCode()
    console.log(param)
    return `${env.BASE_URL}+?param=${param}`
  }
  async getShareCode() {
    const res = await ShareURLData.getShareUrl(this.$axios)
    return res.share_code
  }

Answer 1

paramは[object Promise]というのになっていました。

はい、async関数はPromiseを返す関数ですので、awaitなしで呼ぶとPromiseとなります。

どうやって直したらいいのでしょうか？

ShareUrl自体を同期的に処理しないといけないのであれば、手段はありません。

Comments

[cuku]

ご回答ありがとうございます。
手段がないということは直すことができないということでしょうか？

[maisumakun]

ShareUrlを使う側から再検討が必要になる、ということです（提示されたコードの範囲内だけ書き直す形では解決できません）。

[cuku]

うーーん、、
やりたいことは　retunで　 `${env.BASE_URL}+?param=${param}`を返してあげる関数を作りたいだけなのですが結構難しいということですね、、

[maisumakun]

> 結構難しいということですね、、

はい、getShareCode()が非同期でしか値を返さないので、同期的にその結果を含む値を返すことはできません。

ShareUrl()自体をasyncに変えると、今度はそれを呼んでいる側に影響が出ます。

[cuku]

直し方が全くわからないのですが、どういう方法があるのでしょうか？

[maisumakun]

まずは、ShareUrl()自体がどのように使われているのかを調べるのが先決です。

[cuku]

<share-buttons
:share-url="getShareUrl()"
/>
上記のとこで使われておりshere-bottonsコンポーネントにretunで返された値を渡しています

[maisumakun]

となると、そこにasync関数は使えませんので、Vueインスタンスのデータとして持たせるように改装する必要があるかと思います。

[cuku]

インスタンスのデータ？？
storeを使うということでしょうか？

Answer 2

${env.BASE_URL}+?param=${param} で文字列にしているからではないでしょうか？

URLを返したいなら${env.BASE_URL}?hoge=1&foo=2 のような形式にする必要があります

Comments

[cuku]

paramは文字列にできないですよね？

[komasan1]

```
async ShareUrl() {
const param = await this.getShareCode()
console.log(param)
return `${env.BASE_URL}+?param=${JSON.stringify(param)}`
}
```
これでどうでしょうか？