JavaScript
es6

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

More than 1 year has passed since last update.


概要

なんとなくで利用していた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の使い所や、使うメリット・デメリットを記載していこうと思います。