如何使用 fetch() 从请求中获取响应的内容长度

Question

返回response.json() 时遇到错误，当时我将使用空响应正文进行请求，因此我试图在有空正文时仅返回一个空对象。我想要的方法是检查响应的Content-Length 标头，但是，response.headers.get('Content-Length') 不知何故返回null。这是我的代码：

function fetchJSON(url, options, state = null) {
    return fetch(url, Object.assign({}, options, {
            // TODO: Add options here that should be there for every API call
            // TODO: Add token if there is one
        }))
        .then(response => {
            // Pass the JSON formatted body to the next handler
            if (response.ok === true) {
                if (response.headers.get('Content-Length') === 0) return {};
                return response.json();
            }

            // If the response was not an 2xx code, throw the appropriate error
            if (response.status === 401) throw new AuthorizationError("You are not authorized to perform this action");

            // If it is an error code that we did not expect, throw an regular error and hope that it gets noticed by
            // a developer
            throw new Error("Unexpected response: " + JSON.stringify(response));
        });
}

您能帮我找到回复的Content-Length 或帮我找到另一种方法吗？

Answer 1

你可以这样做：

 if (response.ok === true) {
        if (response.getResponseHeader("Content-Length") === 0) return {};
        return response.json();
 }

或者像这样更容易：

 if (response.ok === true) {
        if (response.length === 0) return {};
        return response.json();
 }

你没事吧？ :)

Answer 2

服务器应在服务器端使用Access-Control-Expose-Headers 公开标头：

Access-Control-Expose-Headers: Content-Length

@sideshowbarker comment 解释了为什么您可以在浏览器的网络面板中看到标题，但当您看到 response.headers.get("Content-Length") 时却收到 null：

仅仅因为您的浏览器接收到标题并且您可以看到 devtools 中的标头并不意味着您的前端 JavaScript 代码可以看到 它。如果来自跨域请求的响应没有 Access-Control-Expose-Headers：Content-Length 响应 — 如所示 在这个答案中 - 那么是您的浏览器本身会阻止您的 代码从能够访问标题。对于跨域请求， 您的浏览器只会向您的浏览器公开特定的响应标头 前端 JavaScript 代码（如果 Access-Control-Expose-Headers 值） 包含该特定标头的名称。

您可以通过将其复制/粘贴到控制台来查看它的工作原理：

fetch("//stackoverflow.com").then(response => console.log(response.headers.get("content-length")))

请注意，Headers.get 的返回值将是一个字节串，因此您必须将其转换为数字才能在数值表达式中使用它：

Number(response.headers.get("content-length")) > 0

Answer 3

我刚刚解决了我的问题，只需将 response.json() 放入 try/catch 块并捕获在我尝试解析空正文时发生的错误。这不是理想的解决方案，但对我有用。

Answer 4

最后，您可以保持代码干净，只需编写if (response.ok)。