筛选空的API响应以避免错误

Filtering out empty API responses to avoid errors

本文关键字:错误 响应 API 筛选      更新时间:2023-09-26

基本上我已经制作了一个程序,其中输入单词并使用Wordnik API找到它们的定义。然后,每个单词都会动态显示,并在单击时显示定义。这是代码:

function define(arr) {
    return new Promise(function(resolve, reject) {
    var client = [];
    var definitions = {};
    for (var i = 0, len = arr.length; i < len; i++) {
        (function(i) {
            client[i] = new XMLHttpRequest();
            client[i].onreadystatechange = function() { 
                if (client[i].readyState === 4 && client[i].status === 200) {
                    if (client[i].responseText.length === 0) {
                        console.log(client[i].responseText);
                        client.responseText[0] = {
                            word: arr[i],
                            text: 'Definition not found'
                        };
                    } 
                    definitions[arr[i]] = JSON.parse(client[i].responseText);
                    if (Object.keys(definitions).length === arr.length) {
                        resolve(definitions); 
                    } 
                }
            };
            client[i].open('GET', 'http://api.wordnik.com:80/v4/word.json/' + arr[i] +
                '/definitions?limit=1&includeRelated=false&sourceDictionaries=all&useCanonical=false&includeTags=false&api_key=',
                true);
            client[i].send();
        })(i);
    }
});
}
function makeFlashCards() {
    var data = document.getElementById('inputText').value;
    var wordsToDefine = ignore(makeArr(findUniq(data)));
    define(wordsToDefine).then(function(result) {
        success(result);
    }).catch(function(reason) {
        console.log('this shouldnt run');
    });
}
function success(obj) {
    document.getElementById('form').innerHTML = '';
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            addElement('div', obj[prop][0].word);
        } 
    }
    attachDefinition(obj);
}
function addElement(type, word) {
    var newElement = document.createElement(type);
    var content = document.createTextNode(word);
    newElement.appendChild(content);
    var referenceNode = document.getElementById('form');
    document.body.insertBefore(newElement, referenceNode);
    newElement.id = word;
    newElement.className = "flashcards";
}
function attachDefinition(obj) {
    var classArr = document.getElementsByClassName('flashcards');
    for (let i = 0, len = classArr.length; i < len; i++) {
            classArr[i].addEventListener('click', function() {
                cardClicked.call(this, obj);
            });
    }
}
function cardClicked(obj) {
    var el = document.getElementById(this.id);
    if (obj[this.id].length !== 0) {
    if (this.innerHTML.split(' ').length === 1) {
        var img = document.createElement('img');
        img.src = 'https://www.wordnik.com/img/wordnik_badge_a2.png';
        el.innerHTML = obj[this.id][0].text 
            + ' ' + obj[this.id][0].attributionText + '<br>';
        el.style['font-weight'] = 'normal';
        el.style['font-size'] = '16px';
        el.style['text-align'] = 'left';
        el.style['overflow'] = 'auto';
        el.appendChild(img);
    } else {
        el.innerHTML = obj[this.id][0].word;
        el.style['font-weight'] = 'bold';
        el.style['font-size'] = '36px';
        el.style['text-align'] = 'center';
        el.style['overflow'] = 'visible';
    }
}
}

当为define函数提供一个包含所有有效单词的数组时,程序会按预期工作。但是,如果数组参数中的任何单词无效,程序不会向每个元素添加单击事件处理程序。我认为这可能与catch被触发有关。

当请求无效单词时,Wordnik API会发回一个空数组,这可能是此问题的根源。我试图通过添加来解释这一点

if (client[i].responseText.length === 0) {
    console.log(client[i].responseText);
    client.responseText[0] = {
        word: arr[i],
        text: 'Definition not found'
    };

但这个条件永远不会运行。

我需要一些过滤掉空数组响应的方法,这样catch就不会被触发,程序就能顺利运行。

当您到达if (client[i].responseText.length === 0)时,请确保client[i].responseText返回空字符串。可能是undefined,在这种情况下client[i].responseText.length将抛出错误,这将导致执行catch块。

function makePromise() {
  return new Promise(function(resolve, reject) {
    var test = undefined;
    if (test.length === 0) {
      resolve("resolved");
    }
  });
}
makePromise().then(console.log).catch(function(res) {
  console.log('Error was thrown')
});

尝试将该条件更改为:

if (client[i].responseText && client[i].responseText.length === 0)