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

0 Shares

网络数据抓取技术详解

网络数据抓取，也被称为网页爬取，指的是从互联网上提取有效信息的过程。在您使用谷歌等搜索引擎进行搜索时，实际上是网络爬虫（或称“机器人”）在工作。这些爬虫会浏览几乎整个网络，并筛选出与您的搜索意图相关的内容。

万维网的诞生初衷是希望每个人都能自由获取信息和知识。但是，您所寻找的数据必须是允许公开访问的，这是进行数据抓取的前提。

网络数据抓取的实用之处

我们正处于一个数据驱动的时代。原始数据经过处理可以转化为有价值的信息，而网络数据抓取技术可以帮助我们实现这一转化，从而服务于更广泛的目标。例如，它可以被用于分析产品的用户反馈，以便改进产品，形成一个有效的反馈循环。

电子商务公司可能会利用网络数据抓取来研究竞争对手的定价策略，从而调整自己的价格。此外，网络数据抓取技术在气象和新闻报道方面也有着广泛的应用。

挑战

#1. IP 限制

部分网站会通过检测您的 IP 地址或地理位置来限制您在特定时间段内请求数据的次数。这种机制主要是为了防止对网站进行恶意攻击。

#2. 验证码

验证码的主要作用是区分真实用户和试图访问网站的机器人。网站通过验证码来防止垃圾邮件和控制爬虫的数量。

#3. 客户端渲染

客户端渲染是网络数据抓取工具面临的一大难题。现在许多网站采用前端框架构建单页应用程序。这些应用程序的内容通常不在服务器端渲染，而是依赖客户端 JavaScript 动态生成。这给爬虫识别网页内容带来了困难。为了获取这些内容，需要执行客户端 JavaScript。

techblik.com API

网络数据抓取 API 可以有效解决抓取过程中面临的大部分挑战，因为它已经为您处理了许多细节。现在，我们来了解一下 techblik.com 的 API，看看如何利用它进行网络数据抓取。

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

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

它可以抓取网页，并将原始 HTML 数据以字符串或 HTML 文件的形式返回，并通过链接访问，您可以选择适合您的方式。

API 的使用方法

本教程将介绍如何使用 NodeJS (一个 JavaScript 运行时环境) 来使用 techblik.com API。如果您的系统上还没有安装 NodeJS，请先完成安装。

在当前文件夹或目录下，在终端运行命令 npm init -y。这会为您创建一个 package.json 文件。

在 package.json 文件中，将 main 键的值修改为 index.mjs (如果默认值不是它)。或者，您可以添加一个 type 键，并将其值设置为 module。

    {
        "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。
- output: 数据呈现给您的格式，可以是内联字符串，也可以是 HTML 文件。内联字符串是默认值。
- device: 您希望打开网页的设备类型。它接受三个值，“desktop”、“mobile”和“tablet”，其中“desktop”是默认值。
- 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 是您从 techblik.com API 获取的原始 html 字符串。

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

使用 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 的高级计划中包含了代理功能。

总结

使用网络数据抓取 API 可以让您专注于提取数据本身，而无需处理过多的技术问题。除此之外，techblik.com API 还提供了诸如断开链接检查、元数据抓取、网站负载统计、屏幕截图捕获、站点状态等功能。所有这些功能都在一个 API 下。要了解更多信息，请参考 techblik.com API 的官方文档。