JavaScript fetch、then、catchの理解[Promise]

こんにちはTriplexLabです
今日はPromise館を見ましょう

fetch関数の動作フローを解析する

fetch関数はPromiseオブジェクトを返します.
その後、Promiseオブジェクトのステータスが->完了した場合、then関数にコールバックを登録できます.
実際、Promiseオブジェクトのステータスが->完了の場合、登録のコールバックが実行されます.
この操作の成功結果はコールバックのパラメータ(応答)である.

Promiseオブジェクトが現れるのはなぜですか?

実際,Promiseオブジェクトが現れる前から非同期処理の方法があった.
settimeout関数またはaddEventListenerメソッドのように

setTimeout(callback, milliseconds);
addEventListener(eventname, callback);

これらは、パラメータに直接コールバックを渡す形で定義されます.
fetch関数がこのように作成された場合

fetch('https;//first.com', callback)

fetch関数もこのように使いますよね?しかし、なぜこの方法を選ばずにPromiseオブジェクトの文法を導入したのでしょうか.これは、関数のフォーマットにコールバックを直接入れると、コールバックhell(callback hell)と呼ばれる問題が発生する可能性があるためです.
このコードを見せてください.fetch関数が現在のようにPromiseオブジェクトに戻るのではなく、settimeout関数のようにコールバックの関数を直接挿入する場合は、複数の非同期操作を順次実行する必要があります.

fetch('https://first.com', (response) => {
  // Do Something
  fetch('https://second.com', (response) => {
    // Do Something
    fetch('https;//third.com', (response) => {
      // Do Something
      fetch('https;//fourth.com', (response) => {
        // Do Something
      });
    });
  });
});

このようなコードを書くべきです.現在、fetch関数のコールバックにはfetch関数があり、その関数のコールバックにはfetch関数があり、そして...ずっとこのように入っていますよね?しかし、この和弦を見るとどんな感じがしますか?読みにくいように見えますが、複雑ですよね?一言では可読性が悪い現在、実際のコードが含まれるべき場所にコメント「//doSomething」が追加されているので大丈夫ですが、実際に必要なコードが含まれていると、そのコードの可読性が著しく低下します.この現象をコールバック地獄またはコールバック地獄と呼ぶ.地獄ピラミッドとも呼ばれます.
しかし、私たちが学んだように、fetch関数はPromiseオブジェクトを返します.

fetch('https://first.com')
  .then((response) => {
    // Do Something 
    return fetch('https://second.com');
  })
  .then((response) => {
    // Do Something 
    return fetch('https://third.com');
  })
  .then((response) => { 
    // Do Something 
    return fetch('https://third.com');
  });

このようにPromise Chainingを行い,複数の非同期タスクをより簡潔なコード順で処理する.
このPromiseオブジェクトを使用すると、callback hellの問題を解決できます.
さらに,Promiseオブジェクトの構文は,従来の直接コールバック法と比較して,非同期動作に関するより詳細な概念を反映している.以前の方法で簡単な方法、すなわちコールバックで必要なパラメータを挿入および実行する場合、Promiseオブジェクト構文には、保留、完了、完了ステータス、操作成功結果、および操作失敗情報(原因)、then、catch、finallyメソッドなど,構文自体は非同期動作に関するより詳細な設計を反映している.
これがいわゆるPromiseオブジェクトで、
(1)callback hell問題の解決に加えて
(2)JavaScript構文において非同期タスク処理におけるより細かい処理を解決するために,このようなことが起こった.
有名なJavaScript 2015年標準ES 6(=ES 2015)に追加されました.
詳細については、以下を参照してください.)
TriplexLab Bolg 😀 😀