この記事の内容は Javascript 初心者に非常に適しています。シンプルでわかりやすい言葉で解説しますので、わからなくても大丈夫です。

約束して、なぜあなたは存在するのですか？

Promise は、最新の Javascript 言語を学習する際に不可欠な知識ポイントです。読んでいて混乱する人も多いでしょう。主な理由は次の一文に要約できます:

コードは上から下に実行されなくなりました。

通常、作成したコードは順番に実行されます。たとえば、1 から 3 までカウントするコードを作成します。

console.log(1)
console.log(2)
console.log(3)

F12 を押してブラウザのコンソールを開き、上記のコードをコピーして Enter を押すと、1 から 3 までの数字が順番に出力されることがわかります。

1
2
3

ここで、コードの順序は変更できないが、最終的な印刷出力の順序はコードの順序とは無関係でなければならないという要件がある場合、これは可能でしょうか?

1、2、3 をそれぞれ 3 人で印刷すると、非常に簡単になります。数字を同時に出力するタスクを指示するだけでよく、出力の順序はタスクの実行時間にのみ関係します。

約束、魔法の効果

それでは、印刷タスクを 3 人に割り当てるにはどうすればよいでしょうか?ここで Promise が使用されます。新しい Promise オブジェクトを作成すると、コードのセクションを現在の「プロセス」で実行するのではなく、新しい「プロセス」に割り当てることができます。ここでの「プロセス」は、私たちがよく話すオペレーティング システムのプロセスと同じではなく、コードを順番に実行する仮想単位を表す単なる抽象的な概念であることに注意してください。

お約束、組立説明書

先ほど述べたように、Promise は新しい「プロセス」とみなすことができるため、コードを実行させたい場合は、それを関数でラップして渡すことができます。この方法では、コードはすぐには実行されません。

Promise には 2 つの関数も用意されており、1 つは解決、もう 1 つは拒否で、それぞれタスクが完了した場合と失敗した場合に呼び出すことができます。これら 2 つの関数は、パラメータとして Promise の内部に渡されます。したがって、次のように組み立てることができます:

Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(1)
      resolve()
    }, 300)
  }
)

ここでは、setTimeout を使用して、時間のかかるタスクをシミュレートします。実際のシナリオでは、このタスクはファイルの読み取り、ネットワーク インターフェイスの要求、またはユーザー入力の待機を行う可能性があります。タスクが完了したら、resolvethe 関数を呼び出して、タスクが完了したことを示します。

完全なコード

次に、同じ方法に従い、他の 2 つを組み立てるときに、異なる印刷番号とタスクに必要な時間を提供するだけでよいことを約束します。最後に、完全なコードは次のようになります。これをコンソールにコピーして試してみてください。

Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(1)
      resolve()
    }, 300)
  }
)
new Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(2)
      resolve()
    }, 200)
  }
)
new Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(3)
      resolve()
    }, 100)
  }
)

最後に、数字が出力される順序はタスクの実行時間に関係します:

3
2
1

Promise、同時実行モデル

同時プログラミングとは、限られた数の CPU コアで多数のタスクの同時実行をシミュレートする方法です。 Javascript の Promise は、並行プログラミングの便利で高速な方法と、戻り値とエラー値を処理するための一連の仕様を提供します。この仕様を理解して慣れると、同時タスクの処理効率を大幅に向上させることができます。