7 回閲覧されました

みなさんこんにちは、jonioです。

今回はasyncとawaitの使い方について簡単なサンプルコードを通して解説します。

理解するには非同期処理・promiseを理解しないといけないのでそれの解説からします。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

非同期処理とは

JavaScriptは同期処理です。

同期処理とは処理が上から順にA・B・C・D… とあった時にAから順番に処理が進み前の処理が終わるまで次の処理はされません。

だから例えばBの処理に凄く時間がかかるとCの処理をした時に遅延が発生してブラウザ上の表示に遅延が発生します。

これに対して非同期処理は処理が上から順にA・B・C・D… とあった時にAから順番に処理が進みますが同期処理との違いは前の処理をしている時も次の処理の手続きがされていて前の処理が終わり次第次の処理をされます。

これにより処理に遅延が発生しません。

次はpromiseの解説です。

promiseとは

非同期処理をする為の物です。

サンプルコードで考えます。

const promise = new Promise((resolve, reject) => {
  // 何かの非同期処理（ここでは2秒後に成功）
  setTimeout(() => {
    const success = true;

    if (success) {
      resolve('成功しました！');
    } else {
      reject('失敗しました...');
    }
  }, 2000);
});

promise
  .then(result => {
    console.log(result); // 成功時：'成功しました！'
  })
  .catch(error => {
    console.error(error); // 失敗時：'失敗しました...'
  });

const promise = new Promise((resolve, reject) => {
  // 何かの非同期処理（ここでは2秒後に成功）
  setTimeout(() => {
    const success = true;

    if (success) {
      resolve('成功しました！');
    } else {
      reject('失敗しました...');
    }
  }, 2000);
});

promise
  .then(result => {
    console.log(result); // 成功時：'成功しました！'
  })
  .catch(error => {
    console.error(error); // 失敗時：'失敗しました...'
  });

細かくコードの意味を知らなくていいので流れだけ知ってください。

1行目〜12行目は非同期処理をしています。

非同期処理が成功したら15行目〜17行目が動作して失敗したら18行目〜20行目が動作します。

処理をする部分（1行目〜12行目）と結果の処理が別れていて記述が複雑な感じがしませんか？

この複雑な記述を超分かりやすくしたのがasync・awaitです。

async・await

const methodA = () => {
  メソッドAの処理
};

const methodB = () => {
  メソッドBの処理
};

const methodC = async () => {
  await methodA();
  await methodB();
};

methodC();

const methodA = () => {
  メソッドAの処理
};

const methodB = () => {
  メソッドBの処理
};

const methodC = async () => {
  await methodA();
  await methodB();
};

methodC();

methodA・methodBがmethodCの後の処理です。

最初に動作するメソッドにasyncを使います。

そのあと動作させたいメソッドはawaitの後ろに記述します。

awaitをmethodAとmethodBに使っていますが上から順に処理がされます。

promiseの時と違ってシンプルですっきりしているのが分かると思います。

だから非同期処理をするならasync・awaitがおすすめです。