JavaScript の約束とフェッチ

約束

レストラン

JavaScript の Promise は単なる 保留中のタスクです。それはレストランで食べ物を注文するようなものです。注文すると、店員は注文した食べ物を持ってくる約束をします。食べ物がテーブルに運ばれたら、約束は果たされたことになります。キッチンに重要な食材がなくなって注文した料理を提供できない場合は、別の場所で食事を調達できます。

これはすべて非同期です。テーブルに座っているとき、友人とチャットしたり、携帯電話をスクロールしたりしているかもしれません。サーバーに注文を与えるために作業を一時停止し、前に行っていた作業に戻ります。

JavaScript の Promise も同様に機能します。 JavaScript はシングルスレッドであるため、Promise を使用すると、JavaScript エンジンは特定の操作が完了するまで待機している間に他のタスクに進むことができます。

JavaScript

Promise は特定の種類のオブジェクトです。すべての Promise は保留状態から始まります。 executor と呼ばれる Promise 内のコールバック関数は、Promise をいつ解決するか拒否するかを定義します。

プロミスの作成:

const order = new Promise((resolve, reject) => {
  if ( foodDelivered) {
    resolve('eat food');
  } else {
    reject('find another restaurant');
  }
})

プロミスを使用する

order
  // wait for the asynchronous value to be fulfilled
  .then(value => console.log(value))
  // handle rejection
  .catch(error => console.log(error))
  .finally(() => console.log('all done'));

フェッチ

fetch は、Promise を返す JavaScript の組み込み関数です。 HTTP リクエストを作成し、.then() と .catch() を使用して応答を非同期に処理できるようにします。

fetch() の使用

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))
  .finally(() => console.log('all done');

コールスタックとイベントループ

コールスタックは、同期タスクを管理し、タスクの実行順序を追跡します。これは非常に簡単です。タスクは書かれた順序で実行されます。

ただし、

非同期タスクはイベント ループによって処理されます。イベント ループを使用すると、非同期コードを順不同で実行できるため、JavaScript エンジンは待機することなく他のタスクの作業を続行できます。

例

これはどのように実行されますか?

console.log("console log first!");
setTimeout( _ => console.log("set timeout second!"), 0);
Promise.resolve().then(() => console.log("promise third"));
console.log("console log last!!!");

順番に実行されると予想されるかもしれませんが、そうではありません。 JavaScript イベント ループは、これらの命令を異なる方法で処理します。

結果は実際には次のようになります:

> console log first!
> console log last!!!
> promise third
> set timeout second!

なぜ？

イベント ループは実行優先度を再配置します:

同期タスク (console.log("console log first!") や console.log("console log last!!!") など) は、表示された順序で直ちに実行されます。
マイクロタスク (Promise コールバックなど) には次の優先順位が与えられ、他の非同期タスクよりも前に実行されます。
マクロタスク (setTimeout など) は、タイムアウトがゼロに設定されている場合でも最後に処理されます。

これにより、JavaScript エンジンが非同期で動作し、すべての操作がすぐに完了するのを待たずに他のタスクを実行できるようになります。

---

Unsplash の Andrew Petrov によるカバー写真

以上がJavaScript の約束とフェッチの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。