Почему функция с fetch выдает неверный результат?

Question

Моя Функция должны выводить в консоль названия репозиториев с именами, введеными в input, причем с вводом каждой новой буквы запрос должен отправляться с обновленным значением input Например если ввести в input слово 'r', должно вывести


Name: R 
Owner: dmpe 
Stars: 434

Name: r 
Owner: binder-examples 
Stars: 125

Name: R 
Owner: TheAlgorithms 
Stars: 221

Name: R 
Owner: datadolphyn 
Stars: 107

Name: swirl 
Owner: swirldev 
Stars: 920

Если ввести медленно все работает (выдает 5 результатов), но если быстро - выдает много результатов или ошибку 'TypeError: Cannot read property '0' of undefined'

Мой код:

let input = document.querySelector('input');

input.addEventListener('keyup',getResult);
    async function getResult() {
        console.clear();
        let answer = await fetch(`https://api.github.com/search/repositories?q=${input.value}`)
        let answerJson = await answer.json();
        let answerItems = await answerJson.items;
        for (let i = 0; i < 5; i++) {
            console.log(`Name: ${answerItems[i].name} \nOwner: ${answerItems[i].owner.login} \nStars: ${answerItems[i].stargazers_count}`)
        }  
    }

Answer 1

Вы спамите сервер и он отказывается с вами сотрудничать, ситуацию где много результатов можно решить переносом consol.clear() под последний await, а ошибку проверкой перед выводом, вернул ли вам сервер items (ну или обернуть вывод в try catch). По хорошему функцию getResult надо обернуть в декоратор debounce, чтобы ограничить частоту запросов.

let input = document.querySelector('input');

input.addEventListener('keyup',debounce(getResult,300));
async function getResult() {
  let answer = await fetch(`https://api.github.com/search/repositories?q=${input.value}`)
  let answerJson = await answer.json();
  let answerItems = await answerJson.items;
  console.clear();
  try{
    for (let i = 0; i < 5; i++) {
      console.log(`Name: ${answerItems[i].name} \nOwner: ${answerItems[i].owner.login} \nStars: ${answerItems[i].stargazers_count}`)
    }  
  }catch(ex){

  };
}


function debounce(func, wait, immediate){
  let timeout;
  return function executedFunction() {
    const context = this;
    const args = arguments;
    const later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
  };
};

<input type="text" />

БЛОГ НА HUSL

Почему функция с fetch выдает неверный результат?

Ответы (1 шт):