JavaScriptでのPromiseの概要、使い方と利点

JavaScriptでのPromiseの概要、使い方と利点を簡単にまとめてみました。

概要

Promiseとは非同期で実行するコールバック関数を登録するためのオブジェクトです。
Promiseを返す関数は、非同期で実行する処理を行ったあと、登録されたコールバック関数を呼び出してくれます。

使い方

Promiseと従来のコールバックを使った実装をそれぞれ書きました。開発者ツールなどで実行できるので試してみてください。

let isCallA = true;  // Bを実行する場合はfalseにしてください
// 従来のコールバック関数の渡し方
oldWay(funcA, funcB);

// Promiseを利用した渡し方
const promise = newWay();
promise.then(funcA, funcB);

// 以下、実行に必要な関数
function funcA() {
  console.log('a');
}

function funcB() {
  console.log('b');
  return "return of B"; // あとで使います
}


function oldWay(a, b) {
  if (isCallA) {
  setTimeout(a, 1000);
  } else {
setTimeout(b, 1000);
  }
}

function newWay() {
  return new Promise(function (resolve, reject){
    if (isCallA) {
    return setTimeout(resolve);
    } else {
        throw new Error();
    }
  });
}

利点

非同期処理のチェーン(順次実行)をわかりやすく書くことができます。 また、エラー時の処理を.catch()で完結に書くことができます。

newWay()
.then(funcA)
.then(funcB)
.then(finalResult => console.log('final result: ' + finalResult))
.catch(failureCallback);

function failureCallback() {
  console.log('failed');
}

また、Promiseに登録処理を行っているイベントループ中はthenで登録された非同期処理が実行されることがないため、実行順序を把握しやすいです。 例えば、以下の処理は必ず'a'が表示されてから'b'が表示されます。

// Promise.resolve()はresolveされたPromiseを作る関数です。
Promise.resolve().then(_ => console.log('b')); 
console.log('a');