🐙

【JavaScript】【初級者脱却】非同期通信について#3 同期・非同期処理のフロー図解

に公開
JavaScript
ECMAScript
非同期処理
初級者
tech

非同期処理では、処理の完了を待たず後続の処理を続けて実行していくことになります。
外的要因等によって処理の完了に時間を要したとしても、順々に処理を実行していくため、後続の処理が実行されたタイミングで、前段階の処理が完了していない場合があり得ます。
非同期処理として定義した関数は、awaitを使用する事で、処理の完了を待ってから、後続の処理を継続していく事が出来ます。

今回は、#2で取り上げた内容をベースに、同期・非同期処理についてフロー図を用いて解説していきます。

同期・非同期処理とは？

プログラムには「同期処理」と「非同期処理」があります。
違いを一言で言うと次のようになります。

処理の種類 動き方 特徴
同期処理 処理が1つずつ順番に実行される 1つの処理が終わるまで次に進まない
非同期処理 処理の完了を待たず次の処理に進む 並行的に実行されるため高速化できる

非同期処理の実装と結果例 & フロー図

1. シンプルな非同期処理

function samplePromise1 () {
  console.log('first');  // （1）

  setTimeout(() => {
    console.log('second');  // （3）
  }, 300);

  console.log('third');  // （2）
};

samplePromise1();

2. async-awaitを使った書き方

async function samplePromise2 () {
  try {
    console.log('first');  // （1）
    await returnPromise();
    console.log('third');  // （3）
  } catch (error) {
    return;
  }
};

function returnPromise () {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(console.log('second'));  // （2）
    }, 300);
  });
};

samplePromise2();

3. 非同期処理でPromiseがrejectを返した場合

async function samplePromise3 () {
  try {
    console.log('first');  // （1）
    await returnPromise();
    console.log('third');  // 上の行でrejectが返りcatchされるためこの行には入らない
  } catch (error) {
    console.log('error');  // （3）
  }
};

function returnPromise () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(console.log('second'));  // （2）
    }, 300);
  });
};

samplePromise3();

Promiseはawaitで受け取る　結果例 & フロー図

1. 非同期処理のPromiseをawaitで受け取った場合

async function samplePromise4 () {
  try {
    console.log('first'); // （1）
    console.log(await returnPromise());  // （3）
    console.log('third');  // （4）
  } catch (error) {
    return;
  }
};

async function returnPromise () {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('second');  // （2）
      resolve(1);
    }, 300);
  });
};

samplePromise4();

2. 非同期処理のPromiseをawaitで受け取らなかった場合

// awaitで受け取らなかった場合
async function samplePromise5 () {
  try {
    console.log('first');  // （1）
    console.log(returnPromise());  // （2）
    console.log('third');  // （3）
  } catch (error) {
    return;
  }
};

async function returnPromise () {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('second');  // （4）
      resolve(1);
    }, 300);
  });
};

samplePromise5();

まとめ・次回

今回は前回の内容にフロー図を組み合わせて解説しました。
動作のイメージと実装方法を照らし合わせて理解する事を意識するのを若手の内は意識すると良いでしょう。

次回は、Promise.allについて解説します。

て解説します。

連載リンク

非同期通信について
#1　async関数の戻り値
#2　Promiseとは
#3　同期・非同期処理のフロー図解
#4

Discussion