JSON-файл не парсится при большом количестве запросов к серверу

Question

Используя 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);
      }
    };

Answer 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)

БЛОГ НА HUSL

JSON-файл не парсится при большом количестве запросов к серверу

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

if (daily_xhr.readyState != 4) return;