1. ホーム
  2. javascript

[解決済み] JavaScriptでawaitを使わない非同期関数

2023-02-21 15:06:20

質問

2つの関数があります。 ab がある場合、前者は非同期、後者は await がなく、後者は await . どちらもコンソールに何かを記録し undefined . どちらかの関数を呼び出した後、別のメッセージを記録し、そのメッセージが関数本体の実行の前か後かに書かれているかどうかを調べます。

function someMath() {
  for (let i = 0; i < 9000000; i++) { Math.sqrt(i**5) }
}

function timeout(n) {
   return new Promise(cb => setTimeout(cb, n))
}

// ------------------------------------------------- a (no await)
async function a() {
  someMath()
  console.log('in a (no await)')
}

// ---------------------------------------------------- b (await)
async function b() {
  await timeout(100)
  console.log('in b (await)')
}

clear.onclick = console.clear

aButton.onclick = function() {
  console.log('clicked on a button')
  a()
  console.log('after a (no await) call')
}

bButton.onclick = function() {
  console.log('clicked on b button')
  b()
  console.log('after b (await) call')
}
<button id="aButton">test without await (a)</button>
<button id="bButton">test with await (b)</button>
<button id="clear">clear console</button>

を使わずにテストを起動した場合 await を付けずにテストを起動すると、この関数は同期的に動作するように見えます。しかし await では、メッセージは 反転 であり、関数は非同期で実行されます。

JavaScriptはどのようにして async 関数がない場合 await というキーワードがない場合、どのように機能するのでしょうか?


実際の使用例です。 私は await キーワードがあり、条件付きで実行されます。そして、私の要素をレンダリングするために、関数が同期的に実行されるかどうかを知る必要があります。

async function initializeComponent(stuff) {
   if (stuff === undefined)
      stuff = await getStuff()
   // Initialize

   if (/* Context has been blocked */)
       renderComponent() // Render again if stuff had to be loaded
}

initializeComponent()
renderComponent()

追伸:他の言語での同じ質問との混同を避けるため、タイトルにはJavaScriptのキーワードがあります(すなわち awaitなしでasyncを使用する )

どのように解決するのですか?

Mozilla のドキュメント :

非同期関数 はawait式を含んでいます。 非同期関数の実行を一時停止し、渡されたPromiseの解決を待ちます。 の解決を待ち、その後、非同期関数の実行を再開し、解決された値を返す。 解決された値を返します。

想定していた通り、awaitが存在しない場合、実行は一時停止されず、その後コードはノンブロッキングで実行されることになります。