如何使用 fetch() 从请求中获取响应的 content-length

Question

我在 returning response.json() 时收到错误消息，而我将执行一个空响应 body 的请求，所以我只是想 return当有一个空的 body 时，一个空的 object。我想要的方法是检查响应的 Content-Length header，但是，不知何故 response.headers.get('Content-Length') 不知何故 returns 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 公开 header：

Access-Control-Expose-Headers: Content-Length

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

Just because your browser receives the header and you can see the header in devtools doesn’t mean your frontend JavaScript code can see it. If the response from a cross-origin request doesn’t have an Access-Control-Expose-Headers: Content-Length response — as indicated in this answer — then it’s your browser itself that will block your code from being able to access the header. For a cross-origin request, your browser will only expose a particular response header to your frontend JavaScript code if the Access-Control-Expose-Headers value contains the name of that particular header.

您可以通过 copy/pasting 在控制台看到它的工作：

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

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

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

Answer 3

我只是将 response.json() 放在 try/catch-block 中并捕获了当我尝试解析空主体时发生的错误，从而解决了我的问题。这不是理想的解决方案，但对我有用。

Answer 4

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

如何使用 fetch() 从请求中获取响应的 content-length

How to get the content-length of the response from a request with fetch()

javascript

fetch-api