JavaScriptレスポンスを理解する

Question

JavaScript fetch()リクエストに対応するために、次のPHPコードを使用しています。私のJavaScriptコードで戻る

$json = json_encode(array(
    'status' => 200, 
    'resources' => $dataObj 
)); 

http_response_code(200); 
header('Content-Type: application/json'); 
echo $json; 
exit; 

、私は応答を取得した後、私は次の操作を実行できます。

console.log(response.status); 
console.log(response.resources); 
console.log(JSON.stringify(response.resources)); 

最初の行は動作し、200の値を示しています。他の行にはundefinedと表示されます。

コードの前にresponse.json（）を追加すると、3つのコンソール行がすべて正しく表示されます。

let resp = await response.json(); 
console.log(resp.status); 
console.log(resp.resources); 
console.log(JSON.stringify(resp.resources)); 

私の質問は：最初の例では、私は正確に200の状態を見ることができますなぜ、私は、データオブジェクトを参照するために、JSON（）関数を使用する必要がありますか？

"{'status':200,'resources':'sth'}" 

と、その文字列はリソースプロパティをhasnt：

Answer 1

httpリクエスト（httpリクエスト）を作成すると、ステータスコードが返されます。これは応答オブジェクトで使用できます。

はまた、あなたのレスポンスボディの一部として statusプロパティを送った、と明示的にJSON（ response.json()）として、応答本体を読み取るために、あなたのコードを教えてまで、あなたは文句を言わないカスタム応答の 任意のを読み取ることができます。

したがって、基本的には、あなたのjsonのものではなく、サーバーから返送されたものです。

Answer 2

応答は、文字列actuallayです。最初にそれをオブジェクトリテラルに解析する必要があります。いくつかの混乱を解消するには

：

サーバーは、完全な応答を送信し、そのHTTPレスポンスもヘッダで構成されていながら、上には、ちょうど体です。あなたが行う場合：

response.status 

実際にはヘッダーステータスです。

Answer 3

Fetch APIを使用している場合は、常に解析する必要のないオブジェクトが戻ってきます。これは既にオブジェクトリテラルです。具体的にはhttps://developer.mozilla.org/en-US/docs/Web/API/Responseです。

このオブジェクトのプロパティはstatusで、最初のケースでは200を返します。

しかし、このオブジェクトのメソッドjson()を呼び出すと、全体ではなく本文が解析されます。この本体では、のバックエンドからのステータスがであり、ステータスはResponseではありません。

let resp = await response.json()はresourcesなどで実際の応答データを返します。