Go to Qiita Advent Calendar 2024 Top
LoginSignup
Kobecow
@Kobecow

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Async Awaitの呼び方について

Discussion

Closed

JavaScriptNode.js非同期

なぜ、同期処理したい時にAsync(非同期)と呼ぶのか？

まずは同期処理と非同期処理に対する私の理解を書きたいと思います。
コードはJavascriptです。

同期処理

const res1 = func1();
console.log(res1);

const res2 = func2();
console.log(res2);

const res3 = func3();
console.log(res3);

このように記載し、標準出力が res1 --> res2 -->res3の順番になるような処理が同期処理と考えています。func2はfunc1の処理が終了後に実行されています。func3も同様にfunc2の処理が終了後に実行されています。

次に非同期処理の例です。

const res1 = func1();
console.log(res1);

const res2 = func2(); // func2はDBからデータを取得するなどの時間のかかる処理
console.log(res2);

const res3 = func3();
console.log(res3);

このように記載し、標準出力が res1 --> undefined -->res3の順になります。func2が処理されている時に、func3が処理されているということがわかるかと思います。

本題

Javascriptで先程の例を同期処理したい場合にasync/awaitを使われるかと思います。(もちろん、Promiseやcallbackでもかまいません。)
ここが私のわからないと言いますか、理解に苦しむところです。なぜ、同期処理したいのに、asyncとか非同期処理って言葉を使うの？

0
uasi
@uasi

同期処理したい場合にasync/awaitを使われるかと思います。

async/await は同期処理をするものではなくて、本質的に非同期な処理を同期処理に近い構文で書けるようにするものです。

たとえば、例のコードで async/await を使うとこうなります。

async function run() {
  const res1 = func1();
  console.log(res1);

  const res2 = await func2(); // func2はDBからデータを取得するなどの時間のかかる処理
  console.log(res2);

  const res3 = func3();
  console.log(res3);
}

await func2() の部分は、同期的に（つまり他の処理の割り込みを許さない形で） func2() の完了を待つ のではありません 。逆にこの時点で run() の処理を中断して、他に実行中の Promise や発生した DOM イベントの処理を行い、いつか func2() が完了したら run() の処理の続きに戻ってきます。

async な関数はコードの見た目の上ではひとつながりの処理に見えるけれど、 await の位置で前後に切り離され、時間的な間隔を開けて（その間に無関係な他の処理を挟んで）実行される……つまり非同期処理をしているということです。

1Like
Kobecow
@Kobecow

@uasi ご回答ありがとうございます。
ちょっと感動するくらい頭に入ってきました。
3年くらいなんでなんだろうって思ってた疑問なので、こんなスッキリする回答が得られて嬉しいです。

0Like

Your answer might help someone💌

LoginSign Up