ES6のPromise

Promiseとは？

Promiseは、ES6において、非同期処理のコールバック関数をシンプルに記述するための仕組みです。 JavaScript側でネイティブに実装されているため、requireで外部からモジュールをimportせずに、使えるのがメリット

Promiseの３つの状態

promiseには、 - unresolved - resolved - rejected

の３つの状態があります。 unresolvedは、何かしらの処理を実行中の状態です。インターネット経由で画像などを取得しようとしていて、そのしている最中はunresolvedになります。 処理が何かしら終わった時に、resolvedとrejectedのいずれかに移行します。 正常にレスポンスが帰ってきた場合は、resolvedに移行します。 画像を取得しようとしていて、途中で通信が遮断されてしまい、リクエストが失敗してしまった時はrejectedに移行します。

そして、処理が終わった後に、別の処理を書いていきたいのですが、これはコールバックで受け取ります。 ただ、resolvedとrejectedでコールバックのメソッドが違うので注意してください。 resolvedのコールバックはthenで受け取り、rejectedはcatchメソッドで受け取ります。 一番な簡単なpromiseオブジェクトの作成から、コールバックで受け取るところまでのコードが下記になります。

promise = new Promise((resolve, reject) => {
  resolve();
});

promise.then(() => {
  console.log('処理完了');
});

promise.catch(() => {
  console.log('処理失敗');
});

Promiseのもう一つの特徴として、thenやchatchはPromissオブジェクトに複数登録することができます。 下記のように書けるので、一つにまとめることができます。

promise = new Promise((resolve, reject) => {
  resolve();
});

promise
  .then(() => {
    console.log('処理完了');
  })
  .then(() => {
    console.log('2回目の実行');
  });

この時に注意して欲しいのが、thenとcatchそれぞれのみをまとめることができると勘違いしないでください。 なので、一番最初のコードは以下のようにまとめることができます。

promise
  .then(() => {
    console.log('処理完了');
  })
  .then(() => {
    console.log('2回目の実行');
  })
  .catch(() => {
    console.log('処理失敗');
  });