从 JavaScript 的 fetch 中重新读取响应正文

Question

fetch() returns 承诺（如果成功）解析为 Response object. A very common thing to do is immediately call Response.json() 以将响应主体转换为 JSON 对象。

如果响应正文无效 JSON，则 Response.json() 承诺失败并出现错误。该消息大致如下：

Unexpected token X in JSON at position 0

这在尝试诊断问题时不是很有帮助；理想情况下，我希望能够看到来自服务器的内容（这通常是一条错误消息）。

但是，您似乎只能读取 Response.body 处的流一次（至少在 Chrome 处）。（甚至还有一个只读的 Response.bodyUsed 标志。）当 Response.json() 试图将正文转换为 JSON 时，这已经发生了，所以如果发生JSON解析失败。

有什么方法可以恢复原始的响应主体...当原始 fetch Promise 解析时，除了手动读取它（然后转换为 JSON）之外？

Answer 1

使用Response.clone()克隆Response

let clone = response.clone();

或者，使用Response.body.getReader() which returns a ReadableStream读取Response作为流，TextDecoder()转换Uint8Array数据流发短信。

Answer 2

我不得不处理 API，它偶尔会破坏 JSON 响应 - 在返回之前 response.json() 我复制了响应对象。使用 catch 块，我可以确定错误是否是 SyntaxError，然后使用响应 clone

的文本结果继续修复错误

有点像这样：

var brokenJson = function (url) {
    var responseCopy;
    return fetch(url)
    .then(function (response) {
        responseCopy = response.clone();
        return response.json();
    }).catch(function (err) {
        if (err instanceof SyntaxError) {
            return responseCopy.text()
            .then(function(data) {
                return fixJson(data);
            });
        }
        else {
            throw err;
        }
    }).then(function (json) {
        // do things
    });
};

fixJson 只是一个修复接收到的数据的函数——在我的例子中，当它被破坏时 JSON，它总是以同样的方式被破坏——我认为它有一个额外的前导 {或尾随 } - 不记得了

重新阅读问题，您更有可能希望将错误记录到控制台而不是修复 json - 轻松重写：

var brokenJson = function (url) {
    var responseCopy;
    return fetch(url)
    .then(function (response) {
        responseCopy = response.clone();
        return response.json();
    }).catch(function (err) {
        if (err instanceof SyntaxError) {
            return responseCopy.text()
            .then(function(text) {
                console.error(text);
                throw err;
            });
        }
        else {
            throw err;
        }
    }).then(function (json) {
        // do things
    });
};

Answer 3

将 response.json() 分配给一个变量并返回它对我有用。 clone() 再次说它已锁定。

fetch("http://localhost:3000/watchlist")
    .then(response => {
      var res = response.json();
      return res;
    })
    .then(data => {
      console.log(data);
      this.setState({ data });
    });

Answer 4

我使用了 JSON.parse(response.resp.data)，因为不知何故克隆不起作用。

从 JavaScript 的 fetch 中重新读取响应正文

Reread a response body from JavaScript's fetch

javascript

json

stream

httpresponse

fetch-api