jsのaxiosで取得したデータを呼び出し元に返したい

Question

実現したいこと

axiosのpostで取得したデータを呼び出し元にreturnしたいです。

前提

とあるコンポーネントでuseTekitoを呼びだしています。
postが完了するとjson形式のデータが返ってきます。
以下の様なコードでコンソールにpost後に帰ってくるデータを表示させることはできたのですが、
このデータをuseTekitoの呼び出し元へreturnする方法を教えてください。

import axios from "axios";

export const useTekito = (request)=>{
    const url = "test/test"
    axios.post(url,request)
      .then(function (response) {
        console.log(response.data)
      })
}

試したこと

以下のような動きを試してみましたが、asyncにすることでpostの結果が返ってくる前にresultをreturnしてしまい、jsonデータではなくPromiseデータが返されていしまいました

import axios from "axios";

export const useTekito = (request)=>{
    const url = "test/test"
    const a = async ()=>{await axios.post(url,request)}
   const result =a()
   return result

      
}

Answer 1

jsonデータではなくPromiseデータが返されていしまいました

それしか方法はありません。JavaScriptの枠内で、非同期に得られる値を同期的に返す方法は存在しません。

Comments

[退会済みユーザー]

1個めのコードに関しては同期処理ではないんですか？

[maisumakun]

同期処理ではないです。.thenは結果が返ってから非同期で実行されます。

[退会済みユーザー]

なるほど。Promise関係は特殊な動きをするのですね、、、。
詳しく調べてみます。
とりあえず、then()のところで結果の値を状態管理された変数にいれて、
別のコンポーネントでそれを感知して再レンダリングするみたいな流れになるのかな、と思っています。

ありがとうございました