<aside> 💡 背景：是想要抢一台YxVM的SG机器，但是不知道老板啥时候放货，想要监控官方Web端的 库存数量，并且推送提醒。

</aside>

  1. 打开YxVM官网，找到需要监控的VPS的SKU，找到Network中具体接口

Untitled

根据Response初步判断，Web端的库存数量（Available）是这个接口中返回的。

Untitled

通过审查元素找到具体的DOM节点，找到对应的id和class，通过正则表达式可以将这个节点提取出来。(不会写可以问GPT)

  1. 下载HTTPWidget(App Store 上的“HTTPWidget” (apple.com))，
  2. 点击右上角加号，新增一个Request

Untitled

其实它相当于一个API Client，类似Postman、Apifox，可以看到许多配置选项，我们只需要配置好URL、Method、响应的解析，就可以进行下一步操作

  1. 具体配置

根据上面分析填入请求相关配置

<aside> ➡️ URL：https://yxvm.com/index.php?rp=/store/singapore-hybrid-beta

HTTP Method: GET

Extract by: Javascript

</aside>

通过接口响应和页面元素分析，实际上我们需要获取的就是id=product2下的类名为qty的span标签里的文本元素，输入以下JavaScript代码，点击Execute Script可以查看效果

// 使用正则表达式匹配 id="product2" 的 div 及其内容
  const product2Match = responseString.match(/<div[^>]*id="product2"[^>]*>([\\s\\S]*?)<\\/div>/i);
  
  if (product2Match) {
    // 在匹配到的内容中查找类名为 qty 的 span 及其内容
    const qtyMatch = product2Match[1].match(/<span[^>]*class="qty"[^>]*>([\\s\\S]*?)<\\/span>/i);
    
    if (qtyMatch) {
      // 提取数字
      const numberMatch = qtyMatch[1].match(/\\d+/);
      if (numberMatch) {
        // 返回解析后的数字
        return parseInt(numberMatch[0], 10);
      }
    }
  }
  
  // 如果没有找到所需的元素或无法解析数字，返回 null 或其他适当的默认值
  return '';

Untitled

  1. 最终效果

Untitled

Untitled