非同期処理及びPromise、async/awaitについてのまとめ - エンジニアzakinoの備忘録ブログ

非同期処理及びPromise、async/awaitについて理解した為、備忘録として残します。

非同期処理って何？

複数の処理をする際に順番を待たないで次の処理を実行する処理の事です。また、処理を順番通りに行う事を同期処理と言います。

Javascriptでは、通常1行目から順に処理が実行されていきます。(同期処理)

    console.log("1行目");
    console.log("2行目");
    console.log("3行目");
    // 以下、出力結果
    // 1行目
    // 2行目
    // 3行目

しかし、Javascriptの非同期処理で代表的なメソッドsetTimeOut()メソッドを利用すると、以下のようになります。

    console.log("1行目");
    setTimeout(() => {
      console.log("2行目");
    }, 1000);
    console.log("3行目");
    // 以下、出力結果
    // 1行目
    // 3行目
    // 2行目

2行目より先に3行目が実行されていますね。これは、2行目のsetTimeOutで1秒後に処理を実行するように設定されており、2行目の処理を実行している間に3行目を並行して処理を実行した為です。

Promiseとは

非同期処理を行う手法の1つになります。

Promise オブジェクトは、成功時にはresolve、失敗時にはrejectを返します。以下に例を示します。

    function examResults(totalTestScore) {
      return new Promise((resolve, reject) => {
        if (totalTestScore > 400) {
          resolve("受験結果：合格");
        } else {
          reject("受験結果：不合格");
        }
      });
    }

    function postExamProcessing() {
      console.log("examResultsメソッドと並行に処理を実行");
    }
    
    examResults(450)
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.log(error);
    });
    postExamProcessing();
    // 以下、出力結果
    // "examResultsメソッドと並行に処理を実行"
    // "受験結果：合格"

examResultsのtotalTestScoreに450を渡した結果、resolve("受験結果：合格")が返却され、examResultsのthenからログが出力されました。

また、Promiseオブジェクトは非同期処理である為、examResults よりも先に postExamProcessing の処理が完了し、ログが出力されています。

async/awaitとは

非同期処理を同期処理のように動作させることができる手法です。

以下に例を示します。

    function examresults(totaltestscore) {
      return new Promise((resolve, reject) => {
        if (totaltestscore > 400) {
          resolve("受験結果：合格");
        } else {
          reject("受験結果：不合格");
        }
      });
    }

    function postExamProcessing() {
      console.log("examResultsメソッドと並行に処理を実行しません。");
    }
    
    async function printExamResults() {
      try {
        const result = await examresults(450);
        console.log(result);
        postExamProcessing()
      } catch (error) {
        console.log(error);
      }
    }

    printExamResults();
    // 以下、出力結果
    // "受験結果：合格"
    // "examResultsメソッドと並行に処理を実行しません。"

今回は、examresultsメソッドの処理が完了してから、postExamProcessingメソッドが処理されている事がわかりますね。

このasync/awaitは非常に便利で、サーバー通信の処理を書いた後にその後のコードではサーバー通信で返却された値を利用したい場合、サーバー通信の処理を待つようにする事ができます。

最後に

この記事では、非同期処理及びPromise、async/awaitについてまとめました。最初は全く聞き覚えのない言葉で理解することに手間取りました。笑

まだ理解できていないことは大量にあるので、少しずつ身につけていきたいと思います。最後まで読んでくださりありがとうございました〜

非同期処理って何？

Promiseとは

async/awaitとは

最後に

参考資料