空の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') 
 
});

にその条件を変更してみてください：あなたはあなたのサンプル・コードからAPIキーを削除する必要があり

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