javascript - 如何处理这个 fetch() TypeError?
问题描述
我正在尝试将我的获取查询的响应状态打印到控制台(以便以后处理那些边缘情况)。但是,唯一有效的 console.log 调用是“breaches”函数中的调用。当 HIBP 数据库中存在帐户时,我没有收到任何错误,但当帐户不在数据库中时,我收到“请求失败:TypeError:response.json 不是 json 的函数”错误。我究竟做错了什么?我从Google Web Dev文章中获得了错误处理代码。
function createNode(element) {
return document.createElement(element);
}
function append(parent, el) {
return parent.appendChild(el);
}
function status(response) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
console.log('all is good');
} else if (response.status == 404) {
return Promise.resolve(response.statusText)
console.log('no breaches');
} else if (response.status == 400) {
return Promise.resolve(response.statusText)
console.log('bad req');
} else {
return Promise.reject(new Error(response.statusText))
}
}
function json(response) {
return response.json()
}
var account = document.getElementById('account'),
results = document.getElementById('results');
account.addEventListener("keyup", keyupEvent);
function keyupEvent() {
event.preventDefault();
if (event.key === "Enter") {
fetch('https://haveibeenpwned.com/api/v2/breachedaccount/' + account.value, {
timeout: 1500,
userAgent: 'test'
})
.then(status)
.then(json)
.then(function(breaches) {
console.log('Status Code: ' + breaches.status);
let span = createNode('span');
return breaches.forEach(function(check) {
span.innerHTML = `${check.Name}<br/>`;
append(results, span)
})
}).catch(function(error) {
console.log('Request failed:', error);
});
}
}
解决方案
您的status
函数返回(承诺)400 或 404 响应的状态文本。使用结果的承诺链fetch
无法处理这种可能性;它假设它得到响应对象。
您可能希望拒绝 400 或 404 而不是解析,但如果不是,您需要在then
处理程序中分支以期望读取 JSON。
您消耗违规行为的代码也会覆盖相同的span
内容并重复附加它;它最终只会附加一次,最后一次泄露的信息。并且该append
函数没有提供任何有用的抽象,而不仅仅是调用appendChild
.
如果 API 真的返回 404 以表示“无违规”(blech),那么我将摆脱createNode
and append
,改为status
:
function status(response) {
if (response.ok) {
return response.json();
} else if (response.status === 404) { // If the API *really* returns
return []; // a 404 for "no breaches"
} else {
throw new Error(response.statusText);
}
}
进而:
fetch('https://haveibeenpwned.com/api/v2/breachedaccount/' + account.value, {
timeout: 1500,
userAgent: 'test'
})
.then(status)
.then(breaches => {
// No `return` here, the chain isn't passed on and there
// aren't any further resolution handlers
breaches.forEach(check => { // Or a for-of loop
const span = document.createElement("span");
span.innerHTML = `${check.Name}<br/>`;
results.appendChild(span);
});
}).catch(error => {
console.log('Request failed:', error);
});
另外:您的status
函数表明您没有意识到then
(和catch
)创建新的 promises。status
如果您的函数仅用作处理程序,则没有理由创建任何承诺then
。它应该只返回一个值(由创建的承诺then
将使用该值解决)或抛出错误(由创建的承诺then
将拒绝该错误):
// This is equivalent to your current `status` function (assuming it's always
// used as a `then` callback)
function status(response) {
if (response.ok) { // if (response.status >= 200 && response.status < 300) {
// all okay
return response;
} else if (response.status == 404) {
// no breaches
return response.statusText;
} else if (response.status == 400) {
// bad request
return response.statusText;
} else {
throw new Error(response.statusText);
}
}
(我删除了console.log
每个分支之后的行,因为它们无法访问。)return
推荐阅读
- c# - C# 与方法参数的逆变
- excel - 如何通过浏览文件将 PDF 图像保存到 XLSX?
- flutter - 在 Flutter 中创建特定的时间变量
- javascript - 为什么这个smoothscript javascript会在底部创建一个空白?
- r - 用不同的 y 尺度覆盖直方图
- api - API 网关如何通过自省验证访问令牌
- c++ - 错误:使用通用引用的声明冲突
- php - 如何检查表是否已经在 Laravel Query Builder 中有 where 子句?
- java - 为什么 GetExternalFileDirs 在 android 中不起作用?
- linker - 使用 ASAN 构建 glib 库