Axiosで手に入れたデータを変数に保存したい

Question

前提・実現したいこと

現在、reactとsqlでウェブアプリケーションを作成しています。sqlから手に入れたデータをいろいろなところで使いたいので変数に保存しようと思ったのですが、変数の中身がundefinedになってしまいます。上のconsole.log(response.data)ではデータは取れているのですが、変数に保存されません。なにが悪いのでしょうか？回答お願いします。

該当のソースコード

const getEmployeeInfo = () => {
        Axios.post('http://localhost:3001/api/getEmployeeInfo',{
            shopName:location.state.shopName
        }).then((response) => {
            console.log(response.data)
            return response.data
        })
    }
    const employeeData = getEmployeeInfo()
    console.log(employeeData)

コンソール

undefind　      //employeeDataのconsole.log
{...}{...}    //Axios.post内のconsole.log

Answer 1

そもそも[getEmployeeInfo()]にreturnがありませんので、返り値はundefinedになります。
（紛らわしいですがthen()の中のreturnは、あくまでthen()に渡している関数のreturnなので、getEmployeeInfo()のreturnではありません）

またAxiosの処理は非同期で行われるので、このままでは通信処理の終了を待たずに[getEmployeeInfo()]は終了します。
つまり、取得した値を利用するためには通信処理の終了を待つ必要があるということです。

これを解決するには、Promiseやawaitの導入を検討してください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

Comments

[bicLighter]

async,awaitはまだ未勉強でした。添えてもらったURLを参考に解決したいと思います。返信ありがとうございました。