如何使用JavaScript调用shrtco.de短链接API实现链接缩短功能

一、接口基础调用规则 #

• 请求方式：GET
• 接口地址：https://api.shrtco.de/v2/shorten
• 必传查询参数：
  • url：待缩短的原始长链接，需做URL编码处理
• 可选查询参数：
  • domain：指定生成短链使用的域名，可选值为 shrtco.de、9qr.de、shiny.link，不传默认使用shrtco.de
• 返回结构说明：
  接口返回JSON格式数据，请求成功时ok字段值为true，result.full_short_link字段即为最终生成的短链接；请求失败时ok字段值为false，error字段会返回具体错误原因。

二、现有代码修改方案 #

1. 调整HTML代码 #

你原有HTML存在单选框value值不匹配、元素无唯一标识不方便JS调用的问题，修改后代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短链接生成工具</title>
</head>
<body>
    <div>
        <p>Enter a link</p>
        <input type="text" id="originUrl" placeholder="请输入要缩短的链接">
        <button id="submitBtn">Enter</button> <br>
        <p>Short domain</p>
        <input type="radio" id="domain1" name="short_domain" value="shrtco.de" checked>
        <label for="domain1">shrtco.de</label><br>
        <input type="radio" id="domain2" name="short_domain" value="9qr.de">
        <label for="domain2">9qr.de</label><br>
        <input type="radio" id="domain3" name="short_domain" value="shiny.link">
        <label for="domain3">shiny.link</label>
        <p>Link generated</p>
        <a href="" id="shortLink" target="_blank">ZZZZZ</a>
    </div>
    <script src="getAPI.js"></script>
</body>
</html>

2. 编写getAPI.js逻辑 #

直接复制以下代码到getAPI.js文件即可实现功能：

// 获取页面元素
const submitBtn = document.getElementById('submitBtn')
const originUrlInput = document.getElementById('originUrl')
const shortLinkEl = document.getElementById('shortLink')
const domainRadios = document.getElementsByName('short_domain')

// 按钮点击事件监听
submitBtn.addEventListener('click', async () => {
  const originUrl = originUrlInput.value.trim()
  // 校验输入是否为空
  if (!originUrl) {
    alert('请输入要缩短的链接')
    return
  }
  // 获取选中的域名
  let selectedDomain = 'shrtco.de'
  for (const radio of domainRadios) {
    if (radio.checked) {
      selectedDomain = radio.value
      break
    }
  }
  try {
    // 发送接口请求
    const res = await fetch(`https://api.shrtco.de/v2/shorten?url=${encodeURIComponent(originUrl)}&domain=${selectedDomain}`)
    const data = await res.json()
    if (data.ok) {
      // 渲染生成的短链接
      shortLinkEl.href = data.result.full_short_link
      shortLinkEl.textContent = data.result.full_short_link
    } else {
      alert(`生成失败：${data.error}`)
    }
  } catch (err) {
    alert(`请求失败，请检查网络后重试：${err.message}`)
  }
})

三、注意事项 #

• 输入的原始链接需要带http://或https://前缀，否则接口会返回错误
• 接口有频率限制，短时间内多次请求可能会被临时拦截

内容的提问来源于stack exchange，提问作者Lewondowsky