Promise型が取得されてしまう。

Question

room.lenghtが0の場合、matchUserの処理が呼び出されます。
asyncMatchUserによって取得されたデータは、returnで返されます。
ただし、console.log（data）を見ると、内容はPromiseです。
Promiseではなくレスポンスのデータを取得したいのです。
どうしたらデータを取得できるのでしょうか？

useEffect(() => {
  if (room.lenght != 0) {
    onClickUser(roomId);
  }
  if (room.length === 0) {
    const data = matchUser(roomId));
    console.log(data);
  }
}, []);


const matchUser = async (roomId: number) => {
  try {
    const res = await asyncMatchUser(roomId);
    return await res.data;
  } catch (e) {
    console.log(e.error);
  }
};

// asyncMatchUser.ts
export const asyncMatchUser = async (id: number) => {
  const path = `/rooms/${id}`;
  return await Axios().get(path);
};

Answer 1

async宣言した関数はpromiseを返しますので
それが嫌なら呼び出す側でawaitしてやるとよいでしょう
（全体をasyncで処理する必要あり）

Comments

[yambejp]

例えば
const test=async ()=>{return 1;};
console.log(test());//promiseが戻る

(async()=>{
console.log(await test()); //戻り値1が取得できる
})();

[aaatttt]

返信ありがとうございます。
useEffectをasyncで囲めばいいのでしょうか？

[yambejp]

ちょっとやってみてもらわないとわからないですが

useEffect(asnyc () => {
・・・
const data = await matchUser(roomId));

みたいな感じですかね