篩選出空的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)