如何从Free Dictionary API获取随机例句并定时追加到网页

首先需要明确：Free Dictionary API 没有直接提供随机句子返回接口，所有返回内容都基于传入的查询单词生成，包含单词的释义、发音、配套使用例句等字段。要实现随机取句子的效果，按以下逻辑实现即可：

• 预置常用英文单词池，随机选取单词作为查询参数，大幅降低接口请求失败的概率
• 调用单词查询接口拿到返回结果后，遍历所有释义节点收集所有可用例句
• 增加异常重试逻辑，当选中单词无有效例句、接口请求失败时自动换词重试
• 拿到有效例句后，按你预设的2秒延时规则插入到页面对应容器中

完整可运行代码 #

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="random-sentence"></div>

JS 逻辑部分 #

// 预置常用单词池，可自行扩充提升句子丰富度
const wordPool = ["hello", "world", "code", "book", "travel", "music", "food", "sky", "dream", "time", "friend", "work", "play", "read", "write", "sun", "moon", "tree", "flower", "river"];

async function getRandomSentence() {
  // 最多重试5次，避免请求死循环
  for (let i = 0; i < 5; i++) {
    try {
      // 随机选一个单词发起查询
      const randomWord = wordPool[Math.floor(Math.random() * wordPool.length)];
      const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${randomWord}`);
      if (!response.ok) continue;
      const entryData = await response.json();
      
      // 收集接口返回的所有例句
      const sentenceList = [];
      entryData.forEach(entry => {
        entry.meanings.forEach(meaning => {
          meaning.definitions.forEach(defItem => {
            if (defItem.example) sentenceList.push(defItem.example);
          })
        })
      });

      // 存在有效例句则随机返回一条
      if (sentenceList.length > 0) {
        return sentenceList[Math.floor(Math.random() * sentenceList.length)];
      }
    } catch (err) {
      // 请求异常直接进入下一轮重试
      continue;
    }
  }
  // 多次重试失败返回兜底内容
  return "暂时无法获取随机句子，请稍后再试。";
}

// 页面加载完成后执行逻辑
$(async function () {
  const targetSentence = await getRandomSentence();
  setTimeout(() => {
    $(".random-sentence").append(targetSentence);
  }, 2000);
})

扩展说明 #

• 如果你需要更高的句子随机性，可以自行扩充wordPool的单词量，词库覆盖范围越广，能拿到的句子类型越丰富
• 如果需要定时自动刷新句子，可以把获取句子、插入页面的逻辑放到setInterval中，按你需要的时间间隔触发即可

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