如何使用 techblik.com Web Scraping API 来抓取网站

Web 抓取是从万维网上提取有用信息的过程。 在谷歌搜索期间,网络爬虫(bot),即爬虫,几乎遍历网络上的所有内容并选择与您相关的内容。

每个人都应该可以访问信息或知识的想法导致了万维网的形成。 但是,您正在寻找的数据必须允许公开使用。

网页抓取有什么用?

我们生活在数据时代。 原始数据可以转换为有用的信息,这些信息可以在网络抓取的帮助下用于更大的目的。 它可用于分析和研究产品的用户以改进产品,换句话说,创建反馈循环。

电子商务公司可能会用它来研究竞争对手的定价策略,并据此制定出自己的定价策略。 网络抓取也可用于天气和新闻报道。

挑战

#1。 IP限制

一些网站通过检测您的 IP 地址或地理位置来限制您在特定时间间隔内可以发出的获取网站数据的请求数量。 他们这样做是为了防止对其网站的恶意攻击。

#2。 验证码

区分真正的人和试图访问网站的机器人是验证码的实际作用。 网站使用它来防止网站上的垃圾邮件以及控制网站上的爬虫数量。

#3。 客户端呈现

这是网络抓取工具的最大障碍之一。 现代网站使用能够创建单页应用程序的前端框架。 大多数单页应用程序没有服务器呈现的内容。 相反,他们使用客户端 javascript 根据需要生成内容。 这使得爬虫很难知道网页的内容。 为了获取内容,您需要呈现一些客户端 javascript。

techblik.com API

Web 抓取 API 解决了执行 Web 抓取时面临的大部分挑战,因为它为您处理了一切。 让我们探索 techblik.com API,看看如何使用它进行网络抓取。

techblik.com 的 API 为您提供了一个简单的三步流程:

  • 提供要抓取的 URL
  • 提供一些配置选项
  • 获取数据

它可以为您抓取网页,然后将原始 HTML 数据作为字符串或 HTML 文件返回,可以通过链接访问,无论哪种方式适合您。

使用 API

在本教程中,您将学习如何使用 NodeJS(一种 JavaScript 运行时环境)来使用 techblik.com API。 如果你没有在你的系统上安装 NodeJS,那么在继续之前。

  • 在当前文件夹或目录的终端中运行命令 npm init -y。 它将为您创建一个 package.json 文件。
  • 在 package.json 文件中,将主键值更改为 index.mjs(如果默认情况下为其他值)。 或者,您也可以添加一个键类型并将其值设置为等于模块。
{
  “type”: “module”
}
  • 通过在终端中运行 npm i axios 命令添加名为 axios 的依赖项。 这种依赖性有助于我们向特定端点发出获取请求。
  • 你的 package.json 应该看起来像这样:
{
  "name": "webscraping",
  "version": "1.0.0",
  "description": "",
  "main": "index.mjs",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "Murtuzaali Surti",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.1.3"
  }
}
  • 像这样在 index.mjs 文件中导入 axios。 这里使用了 import 关键字,因为它是一个 ES 模块。 如果它是一个 commonJS 文件,它应该是 require 关键字。
import axios from ‘axios’
  • 我们对 techblik.com API 的所有请求的基本 URL 对于每个端点都是相同的。 因此,您可以将其存储在常量中。
const baseUrl="https://api.techblik.com.com"
  • 指定要从中抓取和获取数据的 URL。
let toScrapeURL = "https://developer.mozilla.org/en-US/"
  • 创建一个异步函数并在其中初始化 axios。
async function getData() {
    const res = await axios({})
    return res
}
  • 在 axios 配置选项中,您应该将方法指定为 post,URL 和端点,一个名为 x-api-key 的标头,其值将是 techblik.com 提供的 API 密钥,最后是将发送的数据对象到 techblik.com API。 您可以访问 dash.techblik.com.com 获取您的 API 密钥。
const res = await axios({
    method: "post",
    url: `${baseUrl}/webscraping`,
    headers: {
        "x-api-key": "your api key"
    },
    data: {
        url: toScrapeURL,
        output: 'file',
        device: 'desktop',
        renderJS: true
    }
})
  • 如您所见,数据对象具有以下属性:
    • url:需要抓取的网页的URL。
    • 输出:数据以何种格式呈现给您,可以是内联字符串,也可以是 HTML 文件。 内联字符串是默认值。
    • 设备:您希望在其中打开网页的设备类型。 它接受三个值,“桌面”、“移动”和“平板电脑”,其中“桌面”是默认值。
    • renderJS:一个布尔值,用于指定是否要呈现 javascript。 当您处理客户端呈现时,此选项很有用。
  • 调用异步函数并获取数据。 您可以使用 IIFE(立即调用的函数表达式)。
(async () => {
    const data = await getData()
    console.log(data.data)
})()
  • 响应将是这样的:
{
  timestamp: 1669358356779,
  apiStatus: 'success',
  apiCode: 200,
  meta: {
    url: 'https://murtuzaalisurti.github.io',
    device: 'desktop',
    output: 'file',
    blockAds: true,
    renderJS: true,
    test: { id: 'mvan3sa30ajz5i8lu553tcckchkmqzr6' }
  },
  data: 'https://api-assets.techblik.com.com/tests/web-scraping/pbn0v009vksiszv1cgz8o7tu.html'
}

解析 HTML

为了解析 HTML,您可以使用名为 node-html-parser 的 npm 包并从 HTML 中提取数据。 例如,如果你想从网页中提取标题,你可以这样做:

import { parse } from ‘node-html-parser’
const html = parse(htmlData) // htmlData is the raw html string you get from the techblik.com API.

或者,如果您只需要来自网站的元数据,则可以使用 techblik.com 的元数据 API 端点。 您甚至不必解析 HTML。

  修复 Xbox One 错误代码 0X87E107DF

使用 techblik.com API 的好处

在单页应用程序中,内容通常不是服务器呈现的,而是由浏览器使用 javascript 呈现的。 因此,如果您在不呈现呈现内容所需的 javascript 的情况下抓取原始 URL,那么您只会得到一个没有内容的容器元素。 让我给你举个例子。

这是一个使用 react 和 vitejs 构建的演示网站。 使用将 renderJS 选项设置为 false 的 techblik.com API 抓取此站点。 你得到了什么?

<body>
    <div id="root"></div>
<body>

只有一个没有内容的根容器。 这是 renderJS 选项起作用的地方。 现在尝试将 renderJS 选项设置为 true 来抓取同一个站点。 你得到了什么?

<body>
    <div id="root">
        <div class="App">
            <div>
                <a href="https://vitejs.dev" target="_blank">
                    <img src="/vite.svg" class="logo" >
                </a>
                <a href="https://reactjs.org" target="_blank">
                    <img src="/assets/react.35ef61ed.svg" class="logo react" >
                </a>
            </div>
            <h1>Vite + React</h1>
            <div class="card">
                <button>count is 0</button>
                <p>Edit <code>src/App.jsx</code> and save to test HMR</p>
            </div>
            <p class="read-the-docs">Click on the Vite and React logos to learn more</p>
        </div>
    </div>
</body>

使用 techblik.com API 的另一个好处是它允许您使用旋转代理,这样您就可以确保网站不会发生 IP 阻塞。 techblik.com API 在其高级计划中包含代理功能。

  如果您忘记了 Gmail 密码会怎样?

最后的话

使用网络抓取 API 可以让您只关注抓取的数据,而不会遇到太多技术麻烦。 除此之外,techblik.com API 还提供诸如断开链接检查、元数据抓取、网站负载统计、屏幕截图捕获、站点状态等功能。 所有这些都在一个 API 下。 查看 techblik.com API 的官方文档以获取更多信息。