requestが実行されるタイミングについて

Reactを用いて簡単なクイズアプリを作成しております。
以下のコードを実行するとquiz()の戻り値がundefinedとなるため、lengthが取得できないエラーとなります。

//Reactコンポーネントを返す関数
const Play = () => {
  const quiz = () => {
    const request = new XMLHttpRequest();
    request.open('GET', 'http://localhost:8080/quizs', true)
    request.responseType = 'json'
    request.send()
    request.onload = function () {
      let responseData = request.response
      console.log(responseData) //ここでデータが取得できていることは確認済み
      return responseData
    }
  }
  console.log(quiz()) //undefined
  const quizCount = quiz().length //undefinedのため、lengthが存在しないエラーとなる

  //以下省略

}

quiz()の実行時点ではレスポンスが返ってきていない？のか、何かコードの実行順が誤っているのか判断がつかなかったため、質問いたしました。
また、ローカルサーバで実行しているAPIが問題ないことは確認済みです。

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じですか？

javascript
1const Play = async () => {
2  const quiz = () => new Promise(resolve=>{
3    const request = new XMLHttpRequest();
4    const url='http://localhost:8080/quizs';
5    request.open('GET', url, true);
6    request.responseType = 'json';
7    request.send();
8    request.addEventListener('load',()=>{
9      let responseData = request.response;
10      resolve(responseData);
11    });
12  });
13  console.log(await quiz())
14  const quizCount = (await quiz()).length;
15  console.log(quizCount);
16}
17