Ajax /提取响应被截断

Question

想要从gocomics.com主页获取漫画以进行我的个人Chrome扩展程序，而在进行下一步之前，我遇到了障碍。

我得到的响应被截断（从debbuger检查变量时），但是如果我用console.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函数的唯一目的是在html中查找漫画图像url，用漫画图像构造html，移至下一个图像，然后重复进行直到没有更多图像并返回生成的html，但我并没有做太多之所以使用它，是因为它从来没有进入while循环，而我却在解决这个问题。

谢谢！

Answer 1

在您的gif中，它仅显示调试器正在显示截断的值，您可以在parseComicsList函数内部以及在执行console.log之前检查字符串的长度吗？

您可以在范围部分中检查其值，它的长度到上一个结束标记为止

Answer 2

您提取的html很好。 问题出在您的parseComicList函数中，因为它正在寻找在已爬网的html代码中不存在的类名。 让我解释一下发生了什么。

当您在浏览器中加载www.gocomics.com并检查html时，有一些您正在寻找的类名称为img-fluid lazyloaded img标签，还有一些其他的类名称为lazyload img-fluid标签。 滚动一点，然后再次检查html。 您会注意到，类名称为lazyload img-fluid的img标记已更改为img-fluid lazyloaded 。 请参见下面的屏幕截图：

这是该站点用来表明图像是否正在等待延迟加载的行为，当您滚动浏览该站点时，JavaScript内部对其进行处理。 这种类型的惰性加载脚本通常检查图像是在视口中还是接近进入视口，这是通过将滚动位置与图像位置进行比较来完成的。 只有这样， lazyload img-fluid类名称才更改为img-fluid lazyloaded 。

您的提取调用仅下载该页面的html页面，但是浏览器与该代码没有交互，即没有滚动。 这意味着，根据我对滚动时此站点的类名称如何工作的观察，您将找不到类名称为img-fluid lazyloaded任何图像。

html.indexOf('lazyload img-fluid')搜索具有初始类名称的图像，它将起作用。 请参阅以下示例：

另一个不会使您暴露于网站的延迟加载逻辑的提示是寻找具有静态类名的祖先标签，例如comic__image或item-comic-image ，然后在该位置之后立即找到第一个img标签。 在某些情况下，这样做可能会更好，因为这将帮助您确保仅匹配帖子中的图像，而不匹配站点的任何延迟加载图像。 在这种情况下，它将开始跳过顶部横幅内的第一个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);
    });

标头不是必需的，如果不包含标头，则会自动添加标头。 根据您期望的响应类型，需要对其进行更改。