Fetch の .json() メソッドが Promise を返す場合と値を返す場合があるのはなぜですか?

Fetch の .json() メソッドの Promise 動作を調べる

Fetch API を調べていると、.json() メソッドに興味深い癖が生じます。特定の状況では Promise を返し、他の状況では直接値を返す理由を詳しく見てみましょう。

次のスニペットを考えてみましょう:

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

ここで、post.data は Promise オブジェクトを生成し、次のことを示唆しています。最初の .then() ハンドラー内の .json() 呼び出しは Promise を返します。

ただし、コードを単純に変更すると、 chain .json():

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

post がオブジェクトになり、title 属性に直接アクセスできるようになります。

この謎を解明するには、Promise の性質を理解する必要があります。 .json() は、HTTP 応答本文を JSON としてフェッチする非同期操作を開始し、Promise を返します。この Promise は、JSON で解析されたデータが最終的に利用可能になることを表します。

Promise が .then() ハンドラーから返されるとき (最初の例のように)、Promise はチェーン内に存在し続けます。ただし、(2 番目の例のように) 値が返された場合、Promise は「満たされた」とみなされ、返された値は外側の .then() の結果として採用されます。

このような状況に対処するには、次のようにします。ネストされた .then()s:

fetch(url).then(response => 
    response.json().then(data => ({
        data: data,
        status: response.status
    })
).then(res => {
    console.log(res.status, res.data.title)
}));

を使用して Promise を連鎖させることも、async や async などの最新の非同期キーワードを利用することもできます。 await:

const response = await fetch(url);
const data = await response.json();
console.log(response.status, data.title);

JSON は必ずしも予期した形式であるとは限らないため、JSON を解析する前に必ず HTTP 応答ステータスを確認してください。

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