fetch()を使用した非同期通信のコントロール

Question

前提・実現したいこと

ご教授お願いいたします。
javascriptのfetch()にてデータ取得後、そのデータを使用してクイズを表示するアプリを作成したいのですが、
非同期通信の終了以前にfunctionを実施してしまいます。
asynchronousFuncを実行した後にquestionPage関数を実施したいと思っております。
ソースコードが作り途中なためお見苦しいコードになっております、ご了承ください。。。

該当のソースコード

const startBtn = document.getElementById('start');
let questionData;

startBtn.addEventListener('click', () => {
  waitingPage();
  asynchronousFunc().then(questionPage);

});

const asynchronousFunc = () => {
  return new Promise((resolve, reject) => {
    fetch('https://opentdb.com/api.php?amount=10')
      .then(response => response.json())
      .then(data => {
        questionData = data
      })
    resolve();
  });
}

const waitingPage = () => {
  const header = document.getElementById('header');
  const content = document.getElementById('content');
  header.innerText = '取得中';
  content.innerText = '少々お待ちください';
}

const questionPage = () => {
  const header = document.getElementById('header');
  const content = document.getElementById('content');
  header.innerText = '問題1';
}

試したこと

promiseやasync,awaitなど一通り勉強して自分なりにコード書いてみましたがどれもうまくいきません。

Answer 1

asynchronousFunc の resolve の位置が間違っています。
この位置だとfetchの完了を待たずに実行されているかと思います。
fetchのthenの中で実行して下さい

Comments

[zoetti]

早速試してみたら解決しました！！ありがとうございます！！