そんなに難しくないよ！ JavaScriptの「約束」を理解するには

この記事の内容は 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 は、並行プログラミングの便利で高速な方法と、戻り値とエラー値を処理するための一連の仕様を提供します。この仕様を理解し、慣れると、同時タスクの処理効率を大幅に向上させることができます。

以上がそんなに難しくないよ！ JavaScriptの「約束」を理解するにはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。