JavaScript Promise の徹底解説

JavaScript Promise の徹底解説

1. Promise とは何ですか?

Promise オブジェクトはコンテナのようなものです。特定の操作を実行するコードが含まれています。コードが実行されると、2 つのコールバック関数が実行されます。1 つは成功した操作 (解決) のコールバック関数で、もう 1 つは失敗した操作 (拒否) のコールバック関数です。

2. なぜ Promise が存在するのでしょうか?

Promise は、非同期プログラミングで使用されるコールバック メカニズムのいくつかの問題を解決するために作成されました。

  • コールバック地獄

コールバック地獄: Promise はネストされたコールバックを .then().then()… に変換できるため、コードの記述と読み取りがより直感的になります。

  • 難しいエラー処理: エラー処理ではコールバックよりも Promise の方が明確で直感的です
  • 複数の非同期操作を同時に実行するコードを書くのは難しいですが、Promiseを使えば簡単にこの状況に対処できます。

3つのPromise共通API

  • promise の .then() メソッドが実行された後、これを実行できます。これには、成功時のコールバック関数と失敗時のコールバック関数の 2 つのパラメーターがあります。
  • 解決promise.resolveメソッドを使用して、promiseオブジェクトを素早く返します。
  • 拒否するpromise.rejectメソッドを使用して、promiseオブジェクトを素早く返します。
  • all 複数の並列非同期操作を同時に実行します。

4つのPromiseの一般的な使用法

1 コールバック地獄を解決するには?

.then() は値を返さない関数なので、Promise チェーンは継続されなくなります。この時点では、後で .then() を呼び出しても効果はありません。

Promise.resolve('foo').then(関数{
  console.log(s);
}).then(関数{
  // 実行されない
  console.log(s);
});

.then()には戻り値関数があり、Promiseチェーンを継続することができます。

Promise.resolve('foo').then(関数{
  console.log(s);
  s + 'bar' を返します。
}).then(関数{
  console.log(s);
});

// フー
// フーバー

.then() には値を返す関数があり、戻り値は別の Promise オブジェクトであり、これによっても Promise が続行されます。前者との違いは、.then() を再度呼び出すと非同期操作がトリガーされる可能性があるため、次のラウンドの resolve() がすぐにはトリガーされないことです。

Promise.resolve('foo').then(関数{
  新しい Promise を返します ((resolve, reject) => {
      console.log(s);
      タイムアウトを設定する(() => {
          解決(s + 'bar')
        }, 1000);
    });
}).then(関数{
  console.log(s);
});


// フー
// foobar ("foo" が表示されてから 1 秒後に表示されます)

2 Promise.all() は戻り値の同時同期受信を実装します アプリケーションシナリオの説明 (複数のインターフェースから同時にデータを呼び出し、フロントエンドでデータを処理する必要があるため、すべてのインターフェースがデータを返すのを待ってから操作する必要があります。)

//デモ
promise1 を const として返す。
定数promise2 = 42;
const promise3 = 新しい Promise((resolve, 拒否) => {
  setTimeout(解決、100、'foo');
});
 
Promise.all([promise1, promise2, promise3]).then((値) => {
  console.log(値);
});
// 期待される出力: 配列 [3, 42, "foo"]

Promise.all() と sync await の違い

//sync 操作時間を2秒待機する async function Index2() {
      コンソール.time()
      const p1 = 新しい Promise((resolve, reject) => {を待つ
        console.log('ここがp1です')
        タイムアウトを設定する(() => {
          解決('p1の戻り値です')
        }, 1000)
      })
      const p2 = 新しい Promise((resolve, reject) => {を待つ
        console.log('ここがp2です')
        タイムアウトを設定する(() => {
          解決('p2の戻り値です')
        }, 1000)
      })
      コンソールログ(p1)
      コンソール.log(p2) 
      コンソール.timeEnd()
   }
    インデックス2();

ここに画像の説明を挿入

// 呼び出しを実装するには Promise.all() を使用します。操作時間1秒関数Index() {
      コンソール.time()
      const p1 = new Promise((resolve, deny) => {
        console.log('ここがp1です')
        タイムアウトを設定する(() => {
          解決('p1の戻り値です')
        }, 1000)
      })
      const p2 = new Promise((resolve, deny) => {
        console.log('ここがp2です')
        タイムアウトを設定する(() => {
          解決('p2の戻り値です')
        }, 1000)
      })
      Promise.all([p1, p2]).then((val) => {
        コンソール.log(値)
        コンソール.timeEnd()
      })
}

ここに画像の説明を挿入

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript における Promise の詳細な説明
  • フロントエンドJavaScriptの約束
  • JS 9 Promise 面接の質問
  • JS の Promise に中止関数を追加する方法
  • JavaScriptのPromiseを徹底的に理解する

<<:  デザイナーが再びハマーの公式サイトに不満を述べる

>>:  MySQLデータベースの基礎知識

推薦する

Windows で複数の MySQL インスタンスを実行する方法

序文Windows では、各インスタンスに適切なパラメータを使用してコマンド ラインから複数の My...

Vue で AES.js を使用する詳細な手順

AES暗号化の使用データ転送の暗号化と復号化処理 --- AES.js最初のステップ: vue に ...

HTMLタグの書き方でよくある間違い

注意を払う必要があります。HTML Police がコードを調べて、意味のないタグをすべて見つけ出す...

MySQL 結合クエリ構文と例

接続クエリ:これは、2 つのクエリ (またはテーブル) の各行をペアで接続した結果です。つまり、1 ...

Reactのコンポーネント共同利用実装

目次ネスティング親子コンポーネント通信ブラザーコンポーネント通信撤回するReact の Linked...

Angularルーティングサブルートの詳細な説明

目次1. サブルート構文2. 例1. 2つの新しいコンポーネントを作成し、その内容を変更する2. ル...

Web フォームの入力要素の高度な使用例 11 選

1. ボタンが押されたときに点線のボックスをキャンセルする<br />入力に属性値hid...

ドラミング効果を実現するJavascript

この記事では、ドラミング効果を実現するためのJavascriptの具体的なコードを参考までに紹介しま...

MySQL 5.6 の「暗黙的な変換」によりインデックスが失敗し、データが不正確になる

背景SQL クエリを実行するときに、where 条件の vachar 型フィールドの単一引用符を削除...

Vue3.0 エラーの解決策: モジュール 'worker_threads' が見つかりません

vue3.0 への最初の試みを記録します。プロジェクトを開始したときに、「モジュール 'wo...

JavaScript 配列の詳細な概要

目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...

Linux 7.6 バイナリに MySQL 8.0.27 をインストールする詳細な手順

目次1. 環境整備1.1 オペレーティング システムのバージョン1.2 ディスク容量1.3 ファイア...

Vue ソースコード学習でレスポンシブ性を実装する方法

目次序文1. レスポンシブシステムの重要な要素1. データの変更を監視する方法2. 依存関係を収集す...

mysql8.0.11 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)

mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと...

Linux で完全な Samba サーバーを構築する方法 (CentOS バージョン)

序文smb は、クライアントとサーバー間の Web 接続および情報通信に使用できるプロトコルの名前で...