Фильтрация пустых ответов API во избежание ошибок

Question

В основном я создал программу, в которой вводятся слова, и их определения найдены с использованием API Wordnik. Каждое слово затем отображается динамически, и определение отображается по щелчку. Вот этот код:

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.

Когда запрашивается неверное слово, API Wordnik отправляет обратно пустой массив, который может быть корнем этой проблемы. Я попытался объяснить это, добавив

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)