Promise・async/await

非同期処理のデメリット

非同期通信は実行完了を待たず次の処理を行ってしまう為、制御が難しいというデメリットがあります。
例えばapiを叩きレスポンスに対して特定の処理をしたいとします。
ネットワーク通信はとても重たい処理なので、実行結果を待たず次の処理に進んでしまいエラーになってしまいます。
Promiseやasync/awaitを使えば実行完了を制御する事ができます。

Promise

まだ確定してない値の状態を表すオブジェクトのことで、非同期処理の操作が完了したときに結果を返すものです。
このPromiseオブジェクトでは、値が確定した時に行って欲しい処理を登録する事ができます。

    const promiseFunc = () => {
      return new Promise((resolve, reject) => {
        someAsynchronousFunc(() => {
          // 何かしらの非同期処理
        }).then(() => {
          // 非同期処理が成功した場合
          return resolve('成功!')
        }).catch(() => {
          // 非同期処理が失敗した場合
          return reject('失敗!')
        })
      })
    }

resolveとrejectを引数で渡します。
このresolveかrejectが実行されるまで次の処理に進まなくなります。
その為順番に制御され同期処理と同じような動きになります。

コールバック地獄

可読性という意味でもメリットがあります。
連続で非同期処理を行いたい場合、コールバック関数を使うとネストが深くなる為可読性が落ちます。

setTimeout(() => {
  console.log(3);
  setTimeout(() => {
    console.log(2);
    setTimeout(() => {
      console.log(1);
    }, 1000); 
  }, 1000);
}, 1000);

Promise化

const sleep = ms => new Promise(resolve => setTimeout(resolve,ms));
sleep(1000)
.then(() => console.log(3))
.then(() => sleep(1000))
.then(() => console.log(2))
.then(() => sleep(1000))
.then(() => console.log(1))

thenでつなぐ事で可読性が上がります。これをthenチェーンと言います。
連続してthenで繋げられるのはthenメソッドの返り値がPromiseオブジェクトの為です。

async/await

promiseをよりシンプル且つ直感的に書けるようにしたものです。

const asyncAwaitFunc = async () => {
  const hoge = await someAsynchronousFunc(() => {
    // 何かしらの非同期処理
  }).then(() => {
    // 非同期処理が成功した場合
    return '成功！'
  }).catch(() => {
    // 非同期処理が失敗した場合
    return '失敗!'
  })
}

asyncは関数前に、awaitは関数実行時につけます。
awaitを使うには必ずasync付きの関数内で行う必要があります。