Ответ Ajax / fetch урезан

Question

Хотел получить комиксы с домашней страницы gocomics.com для моего личного расширения Chrome, и, прежде чем перейти к следующему шагу, я столкнулся с проблемой.

Ответ, который я получаю, обрезается (при проверке переменной в отладчике), но если я консолью .log ту же самую переменную, я получаю полный HTML-код страницы, а затем на следующей строке я пропускаюта же самая переменная ответа на функцию, и она все еще обрезана, как вы можете видеть в gif ниже.
https://s2.gifyu.com/images/aad3e5d9985ee0f3f4.gif

Я впервые работал с xhr, когда появилась проблема, а затем попытался использовать fetch и имелта же проблема.

Вот код

fetch('https://www.gocomics.com/')
.then(function(res) {
  return res.text()
})
.then(function(html) {
  console.log(html)
  parseComicList(html)
})

Я что-то упустил?

Чтобы было ясно, я не спрашиваю, почему он усекается в отладчике, я спрашиваю, почему переменная html console.logs как весь документ / ответ, но передается в функцию усеченного, в результате чего функция не работает?

ОБНОВЛЕНИЕ
Расширение должно:

• Получить страницу html
• Передать html в функцию parseComicList

Единственная цель функции parseComicList - найти URL-адрес комического изображения в html, создать html с комическим изображением, перейти к следующему изображению и повторять до тех пор, пока не останется больше изображений, и вернуть полученный html, но я этого не сделалЯ не слишком много работал с ним, потому что он никогда не входил в цикл while, и я возился с этой проблемой.

Спасибо!

Answer 1

В вашем gif это только показывает, что отладчик показывает усеченное значение, вы можете проверить длину строки внутри функции parseComicsList и перед тем, как делать console.log?

Вы можете проверить его значение в разделе scope, он имеетполная длина до последнего закрывающего тега

Answer 2

Ваш загруженный html просто в порядке.Проблема в вашей parseComicList функции, потому что она ищет имя класса, которого нет в очищенном HTML-коде.Позвольте мне объяснить, что происходит.

Когда вы загружаете www.gocomics.com в своем браузере и просматриваете html, есть несколько тегов img с именами классов img-fluid lazyloaded, которые вы ищете, и другиес именами классов lazyload img-fluid.Прокрутите немного и снова проверьте HTML.Вы заметите, что теги img с именами классов lazyload img-fluid изменились на img-fluid lazyloaded.См. Скриншот ниже:

Это поведение, используемое этим сайтом, чтобы определить, ожидает ли изображение отложенную загрузку или нет, что обрабатываетсявнутренне с JavaScript, когда вы прокручиваете сайт.Этот тип сценария отложенной загрузки обычно проверяет, находится ли изображение в окне просмотра или близко к входу в окно просмотра, и это делается путем сравнения положения прокрутки с положением изображения.Только тогда имена классов lazyload img-fluid изменятся на img-fluid lazyloaded.

Ваш вызов извлечения загружает только html-страницу этой страницы, но браузер не взаимодействует с этим кодом, то есть прокрутка отсутствует.Это означает, что, основываясь на моих наблюдениях о том, как имена классов этого сайта будут работать во время прокрутки, вы не найдете изображения с именами классов img-fluid lazyloaded.

Do html.indexOf('lazyload img-fluid') для поиска.для изображений с начальным именем класса, и это будет работать.См. Пример ниже:

Еще один совет, который не подвергает вас ленивой загрузке сайта, - поиск тегов предков со статическим классом.имена, такие как comic__image или item-comic-image, а затем поиск первого тега img сразу после этой позиции.В некоторых случаях это может быть лучше, потому что это поможет вам убедиться, что вы сопоставляете только изображения внутри постов, вместо того, чтобы сопоставлять любые ленивые изображения загрузки сайта.В этом случае он начинает пропускать первое изображение, которое находится внутри верхнего баннера.См. Пример ниже:

Answer 3

Вы отправляете запрос GET.Он работает как ожидалось - он возвращает вам HTML страницы.Если вы хотите выполнить запрос POST, он должен иметь вид

 fetch("server.com/potatoes", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-type": "application/json",
    },
  })
    .then(res => {
      return res.json();
    })
    .then(res => {
      console.log(res);
    })
    .catch(e => {
      console.log(e);
    });

Заголовки не требуются, и если вы их не включите, они будут автоматически добавлены.Их нужно менять в зависимости от того, какой ответ вы ожидаете.