JavaScript Promise | 非同期プログラミング

はじめに

この実験では、JavaScript を使って指定された時間の後に指定された値に解決する Promise を作成する方法を学びます。Promise コンストラクタを使って新しい Promise を作成し、Promise の解決を遅らせるために setTimeout() メソッドを使います。このスキルは、JavaScript の非同期操作を扱う際に欠かせないものです。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("Asynchronous Programming") subgraph Lab Skills javascript/variables -.-> lab-28596{{"指定された時間の後に Promise を解決する"}} javascript/data_types -.-> lab-28596{{"指定された時間の後に Promise を解決する"}} javascript/arith_ops -.-> lab-28596{{"指定された時間の後に Promise を解決する"}} javascript/comp_ops -.-> lab-28596{{"指定された時間の後に Promise を解決する"}} javascript/async_prog -.-> lab-28596{{"指定された時間の後に Promise を解決する"}} end

遅延付きで Promise を作成する

特定の時間の後に解決する新しい Promise を作成するには、次の手順に従います。

Promise コンストラクタを使って新しい Promise を作成します。
Promise のエクスキュータ関数の中で、指定された delay の後に、提供された value で Promise の resolve 関数を呼び出すために setTimeout() を使います。

以下は resolveAfter() の例の実装です。

const resolveAfter = (value, delay) =>
  new Promise((resolve) => {
    setTimeout(() => resolve(value), delay);
  });

これで、指定された遅延の後に提供された値に解決する Promise を取得するために resolveAfter() を呼び出せます。

resolveAfter("Hello", 1000);
// 1秒後に 'Hello' に解決する Promise を返します

コーディングの練習を始めるには、ターミナルまたは SSH を開いて node と入力します。

まとめ

おめでとうございます！指定された時間の後に Promise を解決する実験を完了しました。スキルを向上させるために、LabEx でさらに多くの実験を練習できます。