了解 JavaScript 响应

Question

我正在使用以下 PHP 代码来响应 JavaScript fetch() 请求。

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

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

回到我的 JavaScript 代码，得到响应后，我可以执行以下操作：

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

第一行有效并显示值200。其他行显示undefined。

现在，如果我在代码前添加 response.json()，所有三个控制台行都会正确显示。

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

我的问题是：为什么在第一个例子中我可以正确看到 200 的状态，但我需要使用 json() 函数才能看到数据对象？

Answer 1

当你发出一个 http 请求 - 任何 http 请求 - 你会得到一个状态码。这在响应对象上可用。

您还发送了一个status 属性作为响应正文的一部分，并且除非您明确告诉您的代码将响应正文读取为 json (response.json())，否则您将无法读取 任何 em> 的自定义响应。

因此，基本上，您可以读取的状态是服务器发回的状态，而不是您的 json 中的状态。

Answer 2

如果你使用Fetch API，你总会得到一个不需要解析的对象。它已经是一个对象字面量，特别是 https://developer.mozilla.org/en-US/docs/Web/API/Response。

此对象有一个名为 status 的属性，在您的第一种情况下返回 200。

如果你在这个对象上调用json() 方法，它会解析你的响应的body，而不是整个。在这个正文中，您有您来自后端的状态，而不是Response 的状态。

这就是为什么let resp = await response.json() 会用你的resources 等返回你的实际响应数据。

Answer 3

响应实际上是一个字符串：

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

并且该字符串没有 resources 属性。您首先需要将其解析为对象字面量。

澄清一些困惑：

服务器发送一个完整的响应，所以上层只是body，而http响应也包含一个header。如果你这样做：

response.status

这实际上是标题状态。