fetch().then().json() が Promise を返す場合と返さない場合があるのはなぜですか?

Fetch() での Promise 処理を理解する

JavaScript の fetch() API を使用する場合、.json の使用時に予期しない動作が 1 つ発生する可能性があります。 （） 方法。この記事では、.json() が特定のシナリオで Promise を返し、他のシナリオでは返さない理由について詳しく説明します。

Promise の動作が異なる理由

.json() メソッドは、オブジェクトが応答本文を取得し、JSON として解析することを約束します。これは、HTTP 応答の本文がすぐには利用できないためです。したがって、.json() メソッドは、本文が利用可能になったときに解決される Promise を返します。

ただし、次のように Promise オブジェクトが .then() ハンドラーから直接返された場合は、

fetch(url)
  .then(response => response.json())

戻り値は Promise ではありません。 Promise は .then() ハンドラー内で無期限にラップされるわけではありません。代わりに、基になる値が返され、非同期操作のチェーンが継続できるようになります。

返された Promise による値アクセス

対照的に、Promise オブジェクトが返されたオブジェクト (例:

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

.then() ハンドラーからの戻り値はそのまま残ります)約束。これは、新しい JavaScript オブジェクトが作成され、そのスコープ内で .json() メソッドが呼び出されるためです。結果の Promise は、返されたオブジェクトの data プロパティに割り当てられます。

代替アプローチ

1 つの .then() ハンドラーで応答ステータスと JSON データにアクセスするには、次のアプローチを使用できます:

1. Promise オブジェクトを直接返し、後続のオブジェクトで処理します。 .then() ハンドラー。
2. 新しいオブジェクトを返す前に、.json() から返された Promise で .then() メソッドを使用してデータとステータスを抽出します。
3. async/await を使用します。 Promise の代わりに、非同期を簡素化します。

結論

.json() メソッドの Promise 動作と、それが .then() ハンドラーとどのように相互作用するかを理解することは、効果的な非同期にとって重要です。 fetch() API を使用したプログラミング。 Promise が提供する柔軟性を活用することで、開発者は HTTP 応答を効率的に処理し、非同期操作の不必要なネストを回避できます。

以上がfetch().then().json() が Promise を返す場合と返さない場合があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。