Fetch API の `.json()` メソッドに異なる Promise 動作があるのはなぜですか?

Fetch API での Promise 処理: .json() の動作が異なる理由

fetch() API を使用する場合、.json() を使用すると動作に微妙な違いが生じます。 json()メソッド。この動作は直観に反するように思えるかもしれないので、根本的な理由を詳しく見てみましょう。

.json() の Promise の性質

デフォルトでは、.json() は解析された JSON 応答に解決される Promise を返します。体。これは、特に大規模な応答や接続が遅い場合には、応答本文がすぐに利用できない可能性があるためです。 Promise により、JSON が完全に解析されるまで後続のコードが実行されないことが保証されます。

Promise Chaining と Value Return

.json() が .then() チェーン内で使用される場合、これは Promise オブジェクト自体を返し、さらなる操作の連鎖を可能にします。ただし、.json() が .then() ハンドラーから直接返される場合は、代わりに Promise の解決された値 (解析された JSON) が返されます。これは、.then() ハンドラーがさらに操作できる値を受け取ることを期待しているためです。

例:

提供されたコード スニペット内:

fetch(url)
  .then(response => {
      return {
          data: response.json(),
          status: response.status
      }
  })
  .then(post => document.write(post.data));

.json() メソッドはオブジェクト リテラル内でチェーンされているため、Promise オブジェクトを返し、その結果、 post.data 属性は Promise です。

代替構文:

fetch(url)
  .then(response => response.json())
  .then(post => document.write(post.title));

この例では、.json() は .then() ハンドラーから直接返されます。したがって、解決された JSON 値がすぐに返され、post.title 属性に直接アクセスできるようになります。

Promiseチェーンとネストされた Promise

オブジェクト リテラルと直接の戻り値の間の不一致を避けるために、次の構文を使用できます:

fetch(url)
.then(response => 
    response.json().then(data => ({
        data: data,
        status: response.status
    })

このアプローチは、最終的に目的の結果に解決されるネストされた Promise を返します。 object.

結論

.json() の Promise 動作コード内での使用方法によって異なります。操作を連鎖させると、Promise オブジェクトが返され、適切な順序が保証されます。ただし、.json() を .then() ハンドラーから直接返す場合は、解決された値 (解析された JSON) が返されるため、すぐに使用できます。この違いを理解することは、Promise を管理し、コード内の予期しない動作を回避するために非常に重要です。

以上がFetch API の `.json()` メソッドに異なる Promise 動作があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。