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()
      })
}

ここに画像の説明を挿入