こんにちは！　株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「非同期処理」についてお伝えしていきます。

非同期処理とは🧐

非同期処理とは、あるタスクを実行をしている際に、他のタスクが別の処理を実行できる方式のことをいいます。

データベースから値を取得する際、通信状況によって取得まで時間がかかる処理とされています。

この時間のかかる処理を、シングルスレッドで実行すると、実行中は他のタスクを行うことができなくなります。

シングルスレッドとは並行処理が発生しない処理のことです。

ユーザがページスクロールをしてデータベースから値を取得する処理が走ったとします。

その場合、DBから値を取得し終わるまで、ページはスクロールされず、ユーザからすると画面がフリーズしたと思われるかもしれません。

このような事態を防ぐため、非同期処理があります。

同期処理の場合は、ページスクロールをしてから実際にスクロールされるまでに待ち時間が発生していましたが、非同期処理ではDBから値を取得するタスクを一時中断して先にページスクロールを完了させた後、再度DBから値を取得しています。

シングルスレッドでこれを実現させるためには、非同期処理が発生したときに処理の完了を待たずに、次のタスクを実行する必要があります。

JavaScriptで非同期処理を実装する上で、非同期処理は処理の完了を待たない事が大切になっていきます。

非同期処理を実装するときに、async/await を記述します。

「async/await」は、Promiseによる非同期処理をより簡潔に効率よく記述できるのが特徴です。

「async」は「function」の前に記述するだけで非同期処理を実行できる関数を定義できます。

基本的な構文の書き方

async function() { }

このようにasyncを記述しておくと、この関数は非同期処理を行ってくれます。

await Promise処理

このようにPromise処理が記述された関数の前に「await」を記述するだけで、結果が返ってくるまで一時停止してくれるわけです。ただし、「await」は「async」で定義された関数の中だけでしか使えないので注意しておきましょう！

まずは、以下のようなPromise処理があるとします。

このコードでは、3秒掛かる処理にPromise内に記述しています。。

function myPromise(num) {
  return new Promise(function(resolve) {
 
    setTimeout(function() { resolve(num * num) }, 3000)
 
  })
}

「await」と「async」を利用する場合のコード

async function myAsync() {
 
    const result = await myPromise(10);
 
    console.log(result);
 
}
 
myAsync();

「async/await」の並列処理

従来のPromise.all()を使った方法です。

この例では、引数違いを3つ同時に実行しています。

最後に「then」の最後の実行するPromise関数をreturnするのを忘れないようにしなければいけません。

Promise.all([
    myPromise(10),
    myPromise(100),
    myPromise(1000)
]).then(function(data) {
 
    console.log(data);
 
})

同じ処理を「async / await」で実行しています。

async function myAsyncAll() {
  
    console.log(await myPromise(10));
    console.log(await myPromise(100));
    console.log(await myPromise(1000));
  
}
 
myAsyncAll();

「async / await」のコードで記述する事ですっきりして把握しやすくなっているのが分かりやすいです。

非同期処理を記述するときは、「async / await」を使っていきましょー！