0

Используя Graphi API, делаю запрос к серверу и получаю в ответ JSON-файл. Если https://api.giphy.com/v1/gifs/trending?api_key=${API_KEY}&limit=5 работает нормально, то когда лимит больше 7 или вовсе неограничен, происходит ошибка "Uncaught SyntaxError: Unexpected end of JSON input" в Хроме или "Uncaught SyntaxError: JSON.parse: unterminated string literal at line 1 column 77152 of the JSON data" в Файрфоксе.

    daily_xhr.open("GET", `https://api.giphy.com/v1/gifs/trending?api_key=${API_KEY}&limit=10`);
    daily_xhr.send();
    daily_xhr.onprogress = function() {
      console.log(JSON.parse(daily_xhr.responseText));
      let test_data = JSON.parse(daily_xhr.responseText).data;
      for (let i = 0; i < test_data.length;i++) {
        let image = document.createElement("img");
        let slider_image = document.createElement("div");
        slider_image.classList.add("swiper-slide");
        slider_image.appendChild(image);
        image.src = JSON.parse(daily_xhr.responseText).data[i].images.original.url;
        mySwiper.appendSlide(slider_image);
      }
    };
3
  • Значит используйте лимит + оффсет, в чём проблема? Ошибка вам говорит что прилетает некорректный json
    – InDevX
    25 дек 2020 в 13:23
  • 1
    стащил выложенный на гитхабе api_key, запустил fetch('https://api.giphy.com/v1/gifs/trending?api_key=z9qEJKCAcrrMCA7q77qHJXLDkv111Kra&limit=50').then((r) => r.json()).then(console.log).catch(console.warn), вижу результат, проблемы не вижу. 25 дек 2020 в 13:25
  • @InDevX да в том то и дело, что json вроде бы корректный, т.е в в консоли разработчика в нетворке я его вижу, и можно поподробнее про оффсет, пожалуйста, расписать 25 дек 2020 в 13:36

1 ответ 1

1

Вы забыли дождаться окончания запроса (получения всего ответа):

if (daily_xhr.readyState != 4) return;

При первом вызове обработчика запрос находится в состоянии LOADING, т.е. ответ не получен полностью. Естественно парсер ругается при попытке распарсить текст не являющийся валидным json.

Смотрите:

const daily_xhr = new XMLHttpRequest();

daily_xhr.open('GET', `https://api.giphy.com/v1/gifs/trending?api_key=z9qEJKCAcrrMCA7q77qHJXLDkv111Kra&limit=15`);

daily_xhr.send();

daily_xhr.onprogress = function() {

  if (daily_xhr.readyState != 4) return;

  const { data } = JSON.parse(daily_xhr.responseText);

  for (const item of data) {
    const image = document.createElement("img");
    image.src = item.images.original.url;

    const slider_image = document.createElement("div");
    slider_image.classList.add("swiper-slide");
    slider_image.appendChild(image);

    document.body.appendChild(slider_image);
  }
};
<html>
<body>

</body>
</html>

Но будет гораздо проще сделать всё используя fetch:

fetch(`https://api.giphy.com/v1/gifs/trending?api_key=${API_KEY}&limit=50`)
  .then((r) => r.json())
  .then(() => {
    // YOUR_CODE_HERE
  })
  .catch(console.warn)

Ваш ответ

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

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