如何调用Petstore API统计可用宠物数量并在前端页面展示

• 调用的可用宠物查询接口返回值为符合筛选条件的宠物对象数组，数组长度即为可用宠物总数量
• 拿到统计值后通过DOM操作写入页面对应元素即可完成展示
• 需要补充请求异常处理，避免接口报错时页面无反馈

<!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>Petstore API</title>
</head>
<body>
    <label>Number of pets:</label><br>
    <textarea id="result"></textarea>
    <script>
     const petStore_url = 'https://petstore.swagger.io/v2/pet/findByStatus?status=available'; 
      async function getPetCount() {
        try {
          const response = await fetch(petStore_url);
          if (!response.ok) throw new Error('接口请求异常');
          const data = await response.json();
          // 校验返回数据格式，异常时默认数量为0
          const petCount = Array.isArray(data) ? data.length : 0;
          // 将统计结果渲染到页面文本域
          document.getElementById('result').value = petCount;
        } catch (error) {
          document.getElementById('result').value = '数量统计失败：' + error.message;
        }
      }
      getPetCount();
    </script>
</body>
</html>

• 不需要额外遍历数组做状态过滤：请求参数已经携带status=available，接口返回的所有条目都是可用状态的宠物，直接读取数组length属性就能拿到总数量，性能更高
• 增加了数据格式校验：如果接口返回非数组格式的异常响应，不会出现JS报错，默认展示数量为0
• 增加了请求错误捕获：网络异常、接口报错时会在文本域展示错误提示，不会出现静默失败

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