Ajax /提取响应被截断

Question

我想从gocomics.com主页上获得有关个人Chrome扩展程序的漫画，甚至在进行下一步之前，我就遇到了障碍。

我得到的响应被截断（在检查来自调试器的变量时），但是如果我用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之前检查字符串的长度吗？

您可以在范围部分检查其值，该值的长度直到最后一个结束标记为止

HWND

Answer 2

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

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

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

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

执行img-fluid lazyloaded来搜索具有初始类名称的图像，它将起作用。请参见下面的示例：

另一个不会使您暴露于网站的延迟加载逻辑的提示是寻找具有静态类名的祖先标签，例如html.indexOf('lazyload img-fluid')或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);
    });

标题不是必需的，如果不包括标题，则会自动添加它们。需要更改它们，具体取决于您期望的响应类型。