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

Question

基本上，我制作了一个程序，用于输入单词并使用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不会被触发，程序可以平稳运行。

Answer 1

当您到达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)