よく聞くPromiseとは？何となくをやめてちゃんと理解しよう

Promiseとは

PromiseとはJavaScriptにおいて、非同期処理の操作が完了したときに結果（成功 or 失敗）を返すもの。非同期処理とは、ある処理が実行されてから終わるまで待たずに、次に控えている別の処理を行うことです。

なぜ非同期処理が必要なのか？
JavaScriptはシングルスレッドでしか動かない性質があるため、複数の処理を並列で走らせることができません。
そのため効率的に処理をするために考えられた仕組みが非同期処理と呼ばれているものです。

非同期処理とは

Promiseの説明でも少し触れましたが、非同期処理とは「ある処理が実行されてから終わるまで待たずに、次に控えている別の処理を行うこと」です。

じゃあ終わらない処理の結果はどうやって取得するのでしょうか？

Promiseは実行中の処理を監視し、処理が問題なく完了すればresolve、反対に問題があればrejectを呼び出してメッセージを表示します。

基本的な書き方

new Promise(function(resolve, reject) {
    resolve('成功');
});

new Promise(function(resolve, reject) {
    reject('失敗');
});

Promiseは resolve と reject、2つの関数を引数に取ります。

・resolve
処理が成功したときのメッセージを表示する関数
・reject
処理が失敗したときのメッセージを表示する関数

thenを使ってコールバック処理を実行する

次にPromiseの then を使用して、コールバック処理を実行してみます。
次のように使用します。

var sample = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve();
    }, 1000);
});

sample.then(function(value) {
    console.log("Promise成功!");
});

console.log("先に出力");

少し複雑になってしまうのですが、promise.then を実行すると、処理した結果の"Promise成功!"という文字列がresultに引き渡されます。console.logでresultを表示すると、"Promise成功!"という文字がコンソール上に表示されます。

そしてこのコードでは"先に出力"というメッセージが"Promise成功!"よりも先に出力されます。これが非同期処理と呼ばれるもので、時間のかかる処理が完了する前に控えている別の処理が実行されます。

チェインを使った処理

前回の処理が成功した時に、その結果をもとに後続の処理を始めることができます。チェインを使用することで複数の処理を連続で実行させることができます。

promise2 に追加されたコールバックはいずれもプロミスのキューにおいて、successCallback または failureCallback が返すプロミスの後ろに追加されます。

つまり、then を使用することで、前の処理が完了した後に次の処理を実行することができるということです。(完了させてから実行させたいユースケースで使う）
➡　1つめのthen と 2つめのthen の関係は同期処理ですね

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

then を使用して、複数の処理を連続で実行させた例です。

doSomething()
  .then(function (result) {
    return doSomethingElse(result);
  })
  .then(function (newResult) {
  // newResultにはdoSomethingElse(result)の結果が格納されている
    return doThirdThing(newResult);
  })
  .then(function (finalResult) {
  // finalResultにはdoThirdThing(newResult)の結果が格納されている
    console.log(`最終結果: ${finalResult}`);
  })
  .catch(failureCallback);

筆者の知識不足になるのですが、現在は業界でこのやり方は使われていないようです。
thenを何度も使用することはthen地獄になりかねないので、現在は「await」が使用されています。

まとめ

Promiseとは非同期処理の操作が完了したときに結果（成功 or 失敗）を返すもの。