javascript axios get

Question

axiosでDBから取ってきたresponseをreturnなどで他のjsファイルに渡すことは可能でしょうか？

この手順で実装をすすめているのですが、4番目で値は受け取れているのですが、jsファイルへの渡し方がわかりません。
1.jsファイル1でボタンが押される
2.axiosのgetが走る
3.laravelのcontrollerでDBの情報を取ってjsonで返す
4.axiosで受け取ってjsファイル2に情報を渡す。
5.jsファイル2で情報を表示する。

jsファイル1(ボタンアクション)

let clickSearch = document.getElementById("searchAttendance");
if (clickSearch) {
  clickSearch.addEventListener("click", function () {
    let searchData = {
      year: document.forms.searchTime.year.value,
      month: document.forms.searchTime.month.value,
    };
    indexAxios(searchData.year, searchData.month);
  });
}

axios(get)

export function indexAxios(year, month) {
    axios
        .get("api/home", { params: { year: year, month: month } })
        .then(response => {
            let year = response.config.params.year;
            let month = response.config.params.month;
            console.log(year)
            console.log(month)
            console.log(response.data)
            return response.data;
        })
        .catch(function (error) {
            return error;
        })
};

axiosのconsole.log結果
![

jsファイル2

let axiosdata = indexAxios();
console.log(axiosdata)

この様にかくと、undifinedになってしまいます。

Answer 1

axiosは非同期処理を行うので、async,awaitを使ってjsonの到着を待ってあげる必要があります。

let indexAxios=async(year.mounth){
        let res = await axios
        .get("api/home", { params: { year: year, month: month } })
        
        
        return res.data;
}

let main=async()=>{
        let axiosData = await indexAxios(2020,11)
        console.log(axiosData)
}

indexAxiosから返ってくるデータ形式は適宜調整してください。

Comments

[hiroto-]

jsファイル2の受け取り方としては、
let axiosdata = indexAxios();であってるのでしょうか？

[mask_mus]

let axiosdata = indexAxios()で受け取ってしまうと、axios.getの結果が返ってくる前にaxiosdataへPromiseオブジェクトが代入されてしまいます。そのため、
let axiosdata = await indexAxios()としてindexAxios内でaxios.getの結果が返ってくるのを待つ必要があります。awaitはasync関数内でしか使えないため、main =async()>{}を新たに定義しました。。

[hiroto-]

ご丁寧にありがとうございます。
大変勉強になりました！
まだ解決できてないのですが、頑張ります！