我正在尝试打印到控制台(为了以后处理这些边缘情况)我的获取查询的响应状态。但是,唯一有效的console.log调用是“违规”功能中的调用。当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
函数返回(承诺)400s或404s响应的状态文本。你的承诺链消耗fetch
结果不能处理这种可能性;它假定它获得响应对象。
你可能想拒绝400s或404而不是解析,但如果没有,你需要在你的then
处理程序中分支,期望读取JSON。
您的代码消耗了违规行为也会覆盖相同的span
并重复附加它;它最终只会附加一次,包含最后一次破坏的信息。并且append
函数没有提供任何有用的抽象而不仅仅调用appendChild
。
如果API真的为“无违规”(blech)返回404,那么我将摆脱createNode
和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
)创造了新的承诺。你的status
函数没有理由创建任何promises,如果它只用作then
处理程序。它应该只返回一个值(由then
创建的promise将使用该值解析)或抛出错误(then
创建的promise将拒绝该错误):
// 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
行,因为它们无法访问。)