アロー関数式とAsync/Awaitを使った非同期処理

アロー関数式とAsync/Awaitを使った非同期処理について、「function」と「Promise」とを比較しながら説明します。

アロー関数式

アロー関数式を使った関数の定義では、通常のfunctionを使った定義が、

let 変数名 = function(引数1, 引数2, ...){
  ...

  return 戻り値;
};

アロー関数式を使うと次のように記述できます。関数で引数を受け取らない場合は括弧だけを記述します。

let 変数名 = (引数1, 引数2, ...)	=> {
  ...

  return 戻り値;
};

アロー関数式の省略形では、引数が 1 つだった場合は引数を囲む括弧 ( と ) を省略できます。また、関数ブロック内で実行する処理が return 文だけだった場合、ブロックをあらわす { と } 、そして return も次のように省略できます。

let 変数名 = (引数1, 引数2, ...) => 戻り値;

Async/Awaitを使った非同期処理

Promiseを使用すると次のようになります。

const promiseFunc = value => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(value), 1000)
  })
}

promiseFunc(1)
  .then((num) => {
    console.log(num);
    return promiseFunc(2)
  })
  .then((num) => {
    console.log(num);
    return promiseFunc(3)
  })
  .then((num) => {
    console.log(num);
  })
//1
//2
//3

同じ処理を、async/awaitを使用すると次のようになります。

const promiseFunc = value => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(value), 1000)
  });
}

const asyncFunc = async () => {
  console.log(await promiseFunc(1));
  console.log(await promiseFunc(2));
  console.log(await promiseFunc(3));
}

asyncFunc();