从JavaScript's fetch中重新读取响应体
Reread a response body from JavaScript's fetch
fetch()
返回promise(如果成功)解析为Response
对象。一个非常常见的事情是立即调用Response.json()
将响应体转换为JSON对象。
如果响应体不是有效的JSON,则Response.json()
承诺失败并出现错误。该消息类似于以下内容:
JSON中位置0的意外token X
当试图诊断问题时,这不是很有帮助;理想情况下,我希望能够看到来自服务器的内容(这通常是一个错误消息)。
然而,似乎你只能在Response.body
读取流一次(至少在Chrome中)。(甚至还有一个只读的Response.bodyUsed
标志。)当Response.json()
试图将body转换为JSON时,已经发生了这种情况,因此在JSON解析失败的情况下,body似乎永远丢失了。
是否有办法恢复原来的响应体…当原始fetch
承诺解析时,缺少手动读取它(然后转换为JSON) ?
使用Response.clone()
克隆Response
let clone = response.clone();
或者,使用Response.body.getReader()
返回ReadableStream
来读取Response
作为流,TextDecoder()
将Uint8Array
数据流转换为文本。
我必须处理一个偶尔搞砸JSON响应的API -在返回response.json()
之前,我对响应对象进行了克隆。使用catch块,我可以确定错误是否是SyntaxError,并使用响应克隆
:
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
});
};
将response.json()分配给变量并返回它对我有效。Clone()再次说它被锁定了。
fetch("http://localhost:3000/watchlist")
.then(response => {
var res = response.json();
return res;
})
.then(data => {
console.log(data);
this.setState({ data });
});
我使用JSON.parse(response.resp.data)
,因为不知怎的克隆不起作用
- 从桌面读取python文件时高亮显示代码
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 如何在不使用JS发出新请求的情况下读取当前标头
- 我如何用jquery读取简单的json结果,以及如何发布新的结果
- json将多行读取为新的onces
- 并行读取多个文件,并相应地将数据写入新文件node.js
- 当新信息写入文件时,如何使用 PHP 动态读取文件
- 在新窗口中使用 javascript 打开新 url,但无法读取值,因为它为 null
- 添加新图表.js单击按钮时,但得到“无法读取空的属性'getContext'”
- 如何满足内置读取操作的新要求,以便在加载页面 10 秒后生成操作
- 剑道网格 - 单击“添加新行”按钮后,获取剑道网格未捕获的类型错误:无法读取“名称”空的属性
- 不能在导航到新页面后读取本地存储
- 在递归聚合物组件中插入新子组件时,无法读取未定义的属性“concat”
- Firebase启动时从数据库加载与读取新添加的内容
- 读取HTML文件data生成新的HTML文件
- javascript读取新的rss条目并创建通知
- 在.txt文件中插入要读取的新行
- 在读取源文件并写入新文件后,尝试删除该文件
- imacros-jave循环读取新的csv行
- 我如何使用jQuery新的高级代码从文本文件中读取文本