Help us understand the problem. What is going on with this article?

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

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

tfrcm
React / ReactNative / Go / TypeScript / AWS / Docker / k8s
https://gemcook.com
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした