如何处理这个fetch()TypeError?

问题描述 投票:2回答:1

我正在尝试打印到控制台(为了以后处理这些边缘情况)我的获取查询的响应状态。但是,唯一有效的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);
            });
    }
}
javascript typeerror fetch-api
1个回答
2
投票

您的status函数返回(承诺)400s或404s响应的状态文本。你的承诺链消耗fetch结果不能处理这种可能性;它假定它获得响应对象。

你可能想拒绝400s或404而不是解析,但如果没有,你需要在你的then处理程序中分支,期望读取JSON。

您的代码消耗了违规行为也会覆盖相同的span并重复附加它;它最终只会附加一次,包含最后一次破坏的信息。并且append函数没有提供任何有用的抽象而不仅仅调用appendChild

如果API真的为“无违规”(blech)返回404,那么我将摆脱createNodeappend,将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行,因为它们无法访问。)

© www.soinside.com 2019 - 2024. All rights reserved.