1. ホーム
  2. javascript

[解決済み] .json()はなぜプロミスを返すのですか?

2022-04-15 20:17:30

質問

をいじっていたのですが fetch() api は、最近、少し風変わりなことに気づきました。

let url = "http://jsonplaceholder.typicode.com/posts/6";

let iterator = fetch(url);

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

post.data が返されます。 Promise オブジェクトを作成します。 http://jsbin.com/wofulo/2/edit?js,output

しかし、もしそれが次のように書かれていたら。

let url = "http://jsonplaceholder.typicode.com/posts/6";

let iterator = fetch(url);

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

post 以下は標準的なものです。 Object で、title属性にアクセスすることができます。 http://jsbin.com/wofulo/edit?js,output

そこで質問なのですが、なぜ response.json はオブジェクトリテラルでプロミスを返しますが、返されただけの場合は値を返しますか?

どのように解決するのですか?

<ブロッククオート

なぜ response.json はプロミスを返すのですか?

を受け取るからです。 response は、すべてのヘッダが到着した時点で 呼び出し .json() は、まだ読み込まれていない http レスポンスのボディに対する別のプロミスを取得します。また JavaScript フェッチ API のレスポンスオブジェクトは、なぜプロミスなのですか? .

<ブロッククオート

からプロミスを返すと、なぜか値が返ってくる。 then ハンドラ

なぜなら それが約束事 . コールバックからプロミスを返して採用される機能は、その最も関連性の高い機能であり、ネストせずに連鎖させることができるようになります。

を使用することができます。

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

またはその他の のアプローチで、.then() チェーンで以前のプロミス結果にアクセスすることができます。 を使用して、json 本体を待機させた後にレスポンスのステータスを取得します。