如何处理这个fetch（）TypeError？

Question

我试图将我的fetch查询的响应状态打印到控制台(以便以后处理那些边缘情况)。但是，唯一有效的console.log调用是“违规”函数中的调用。当帐户存在于HIBP数据库中时，我没有收到任何错误，但是当帐户不在数据库中时，我收到“请求失败:类型错误:响应. 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);
            });
    }
}

Answer 1

您的状态函数返回（promise）400秒或404秒响应的状态文本。您使用＜code＞获取＜/code＞结果的promise链无法处理这种可能性；它假设它得到了响应对象。

您可能希望在400或404上拒绝，而不是解析，但如果不是，则需要在＜code＞中分支，然后＜/code＞处理程序将读取JSON。

您使用违规行为的代码也在覆盖相同的wide并重复附加它；它最终只会附加一次，并包含最后一个违规行为的信息。并且append函数没有提供任何有用的抽象，而不仅仅是调用appendUNICEF。

如果API真的返回404表示“无违规”（blech），那么我将去掉createNode和append，将状态更改为：

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);
    });

另外:你的< code>status函数暗示你没有意识到< code>then(和< code>catch)创造了新的promise。如果您的< code>status函数只是用作< code>then处理程序，那么它没有理由创建任何promise。它应该只是返回一个值(由< code>then创建的promise将解析该值)或抛出一个错误(由< code>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);
    }
}

(我删除了每个分支中< code>return之后的< code>console.log行，因为它们是不可访问的。)