asyncを実行する際に処理を止める方法について

Question

asyncを使用した非同期通信で分からない部分があり、質問させて貰いました。
asyncを使用した関数内ではawaitにより、処理を止めることが出来ますが、これをasync関数内だけでなくasyncを実行する際にもレスポンスが返却されるまでは処理を止めたいと思っています。
具体的には、const responsQuizData = getQuizData()ここの部分で、処理を止めておき、responsQuizDataにfetchした結果が入った後に、次の処理を行う形にしたいと考えています。
何か、良い方法がありましたら教えて頂けましたら幸いです。

'use strict'

window.addEventListener('DOMContentLoaded', () => {
  const startButton = document.getElementById('start_button')
  const titleText = document.getElementById('title')
  const descriptionText = document.getElementById('description')
  startButton.addEventListener('click', () => {
    startButton.remove()
    titleText.textContent = '取得中'
    descriptionText.textContent = '少々お待ち下さい'
    const responsQuizData = getQuizData()
    console.log(responsQuizData)

  })
  const getQuizData = async () => {
    const respons = await fetch('https://opentdb.com/api.php?amount=10')
    const data = await respons.json();
    // console.log(data.results)
    // console.log(data)
    return data
  }

})

Answer 1

async関数は、外から見れば「Promiseを返す関数」です。

呼ぶ側もasync関数としてawaitで受ける、あるいは返り値からthenでつないでいく必要があります。

Comments

[ruuuu]

ご回答ありがとうございます。
> 呼ぶ側もasync関数としてawaitで受ける
こちらなのですが、お手数ですが、具体的にどのようにすれば良いか実装コードの方、ご提示頂けましたら幸いです。

Answer 2

await というのは Promise （と Thenable）オブジェクトが返ってきたときに処理を待ってくれる演算子です。じゃあ await したければ Promise オブジェクト作っちゃえばいいじゃない。

const getQuizData = async () => {
  return new Promise(async (resolve, _reject) => {
    const respons = await fetch('https://opentdb.com/api.php?amount=10')
    const data = await respons.json();
    resolve(data);
  })
}

こうすると getQuizeData() が await できるようになります。詳しくはここ見てね。
Promise - JavaScript | MDN

Comments

[ruuuu]

ご回答ありがとうございます。
ご提示頂きましたコードを試して見たのですが、「Uncaught SyntaxError: await is only valid in async function」というエラーが「 const respons = await fetch('https://opentdb.com/api.php?amount=10')」ここの部分で発生してしまいました...

[ruuuu]

回答の方、修正頂きありがとうございます。
いまいち「Promise」について理解出来ない部分があるのですが、こちら、ご提示頂きましたコードですと「await」では「getQuizData 」を呼び出している側の処理は止められないが、「Promise」では中の処理が終了するまでは、getQuizDataを呼び出している側でも処理を止める効果がある、といった理解で合っておりますでしょうか...?

[A_kirisaki]

いえ、なんかあさっての方へ行っちゃっとる。await というのは Promise を受け取るとその中に持ってる関数を待つことが出来て、関数が結果を返したければ resolve を使って返す、というそれだけのことです。なので getQuizData を await したければ上述のように Promise で包む必要がある、というわけです。

[ruuuu]

なるほどです...
例えばなのですが、以下のような形ですと、getQuizData()によりfetchした結果のレスポンスが返された後に、「test」が出力される形になるということでしょうか...?
console.log(getQuizData())
console.log('test')

[A_kirisaki]

Promise {<pending>}
test
と表示されます。Promise は await しなければいけません。なので
console.log(await getQuizData())
console.log('test')
とする必要があります。

[ruuuu]

度々申し訳ないのですが、console.log(await getQuizData())こちらを試して見ましたら、「Uncaught SyntaxError: missing ) after argument list」とのエラーが出力されてしまいました...

[A_kirisaki]

エッ！？実行できたよ？

[ruuuu]

ちょっと気になったのですが、「 await」はasyncの中でしか使用できないのではないでしょうか？

[ruuuu]

そう考えると、「console.log(await getQuizData())」こちらでエラーが出ていた理由も説明がつくかと思います

[A_kirisaki]

あ、それ見落としてました。本当に申し訳ない。addEventListener に渡す関数に async 付けといてください

[ruuuu]

addEventListener に渡しているのも、コールバック関数な為、asyncをつけることができるのですね。
「startButton.addEventListener('click', async () => {」こちらの形で、試してみましたら、エラーなく実行することが出来ました。

[ruuuu]

.addEventListenerのコールバックにasyncを付ける場合ですが、元々のgetQuizData関数でもエラーは出ませんでした。
const getQuizData = async () => {
const respons = await fetch('https://opentdb.com/api.php?amount=10')
const data = await respons.json();
return data
}

Answer 3

A_kirisakiさんにご助言を頂き、以下の部分にasyncを付け足し、
startButton.addEventListener('click', async () => {
以下の形で、getQuizData()内でfetchした後に、console.log(responsQuizData)の出力を行うことが出来ました。
const responsData = await getQuizData()