【ES6】Promiseクラスの基本的な使い方

概要

なんとなくで利用していたPromiseクラスについて、用語の整理とともににまとめ直します。

Promiseとは

• 非同期処理を抽象化したオブジェクトとそれを操作する仕組み。
• Promiseクラスから生成されたオブジェクトは、then/catchなどの関数が使える。

Promiseのインスタンス化

想定として単純な非同期通信(GET)をPromiseで実装する。

common.js

let getURL = (URL) => {
  return new Promise((resolve, reject) => {
    let req = new XMLHttpRequest();
    req.open('GET', URL, true);
    req.onload = () => {
      if (req.status === 200) {
        let result = JSON.parse(req.responseText);
        resolve(result);
      } else {
        reject(new Error(req.statusText));
      }
    };
    req.send();
  });
};

getURL関数の実行によりPromiseオブジェクトをreturnする作りになっている。
Promiseクラスには、初期化時の引数として関数を渡す。
関数には [resolve] [reject] というPromiseクラス内部で利用する引数を与える。

resolveが呼び出された場合、Promiseオブジェクトの状態は [Fullfilled] となり成功状態となる。
rejectが呼び出された場合、 [Rejectd] となり失敗状態になる。

Promiseオブジェクトの利用

common.js

const URL = 'http://httpbin.org/get';

getURL(URL)
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  });

先程作成した、getURL関数を実行する。
関数を実行するとPromiseオブジェクトが状態を保持して返って来る。
([Fullfilled]か[Rejected]か)
この[Fullfiled]か[Rejected]かどちらかの状態を保持しているPromiseオブジェクトの事をSettled状態(不変)という。

もし、Fullfiled状態なら、[then]関数が実行され、Rejected状態なら[catch]関数が実行される。(よくある非同期処理)

これで一連のPromiseを使った処理が完了し、PromiseオブジェクトはPending(保留)状態となる。

用語整理

• resolve
  • Promiseオブジェクトをインスタンス化する際の、関数の引数に渡す。resolve関数が呼ばれた際はPromiseオブジェクトのthenメソッドを実行する。resolve関数の引数は、thenの引数に当たる。
• reject
  • Promiseオブジェクトをインスタンス化する際の、関数の引数に渡す。reject関数が呼ばれた際はPromiseオブジェクトのcatchメソッドを実行する。
• Fullfilled
  • resolve関数の実行状態を持ったPromiseオブジェクト。
• Rejected
  • reject関数の実行状態を持ったPromiseオブジェクト。
• Pending
  • Promiseオブジェクトがインスタンス化された初期状態。(FullfilledでもRejectedでもない)
• Settled
  • FullfilledかRejected状態かどちらかの状態になっているPromiseオブジェクト。

終わり

Angularの$qやjQueryのdifferなど何気なく使っていたPromiseですが、ES6で標準仕様となった為、
再度勉強しなおしました。
今回は、基本中の基本ですが、次回以降でPromiseの使い所や、使うメリット・デメリットを記載していこうと思います。