概要

Ajaxやタイマーといった非同期通信を利用するときに順番に処理が出来ない。

Promiseやasyncといった単語に辿り着いても悩んでいる人向けに簡単にまとめられたらなと思います。

使いどころ

例えば下記のようなコードでは、setTimeoutという非同期処理を利用しているので最初のコンソールログが3秒後に予約されますが、その下のコンソールログは即時実行されてしまいます。

const fnc1 = () => {setTimeout(() => {console.log("log:fnc1")}, 3000)}
const fnc2 = () => {console.log("log:fnc2")}
fnc1();
fnc2();

使い方

Promiseオブジェクトを生成し、処理を行った後に結果が正常、失敗いった結果を返します。

下記のような感じです。※第一引数が成功、第二引数が失敗を返すための関数

new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log("処理成功");
    resolve();
  }, 3000);
});

受け取った後はthen関数によって、後続の処理を記述することが出来ます。

これらを踏まえて最初の例を書き換えてみますと、

const fnc1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("log:fnc1");
      resolve();
    }, 3000);
  });
}

const fnc2 = () => {console.log("log:fnc2")}

fnc1()
.then(fnc2)

これで処理が同期されました。

尚、then関数は処理をチェーンすることが出来、その場合はfnc2関数以降もPromiseを生成してやる必要があります。例：fnc1.then(fnc2).then(fnc3)…

引数を渡す

おまけで引数で表示文字列を渡すコードです。

const fnc3 = (msg) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(msg);
      resolve();
    }, 3000);
  });
}

fnc3("log:fnc3")
.then(fnc1)