2

Моя Функция должны выводить в консоль названия репозиториев с именами, введеными в 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}`)
        }  
    }
1
  • в каком именно месте ошибка (в какой строке кода)? 15 ноя 2020 в 16:56

1 ответ 1

0

Вы спамите сервер и он отказывается с вами сотрудничать, ситуацию где много результатов можно решить переносом 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" />

5
  • а зачем вообще запускать таймер и проверять внутри флаг immediate - если можно не запускать?
    – Grundy
    15 ноя 2020 в 17:55
  • если передать 3 параметром true, то первый запрос выполнится не дожидаясь обработки setTimeout. Технически можно выпилить 3 параметр, это просто одна из форм реализации 15 ноя 2020 в 18:12
  • Ну так об этом и речь. Если функция запустится сразу - нет нужды запускать таймер. А в текущем виде - он всегда запускается.
    – Grundy
    15 ноя 2020 в 18:19
  • на дальнейшие change инпута, запустится через timeout и спама не будет, запустите код и посмотрите 15 ноя 2020 в 18:26
  • да, слишком сложное решение
    – Grundy
    15 ноя 2020 в 18:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.