Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
36
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@tfrcm

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
36
Help us understand the problem. What are the problem?