javascript

(()=>{
  const getRandomCat = () => 
    fetch('https://random-cat-assets-r2.hats-land.com/api/v1/json', {
      headers: { 'Accept': 'application/json' }
    })
    .then(r => r.json())
    .then(d => {
      const i = new Image();
      i.src = d.url.webp; // 可选 d.url.png
      i.alt = 'Random Cat Avatar';
      document.querySelector('.random-cat')?.replaceChildren(i);
    })
    .catch(e => console.error('RandomCat fetch failed:', e));

  document.addEventListener('DOMContentLoaded', getRandomCat);
})();

javascript

$(document).ready(() => {
  $.ajax({
    url: 'https://random-cat-assets-r2.hats-land.com/api/v1/json',
    method: 'GET',
    dataType: 'json',
    headers: { 'Accept': 'application/json' }
  })
  .done(data => {
    const img = $('<img>', {
      src: data.url.webp, // 可选 data.url.png
      alt: 'Random Cat Avatar'
    });
    $('.random-cat').empty().append(img);
  })
  .fail(err => console.error('RandomCat fetch failed:', err));
});

javascript

(()=>{
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://random-cat-assets-r2.hats-land.com/api/v1/json');
  xhr.setRequestHeader('Accept', 'application/json');
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      const img = new Image();
      img.src = data.url.webp; // 可选 data.url.png
      img.alt = 'Random Cat Avatar';
      document.querySelector('.random-cat')?.replaceChildren(img);
    }
  };
  
  xhr.onerror = function() {
    console.error('RandomCat fetch failed:', xhr.statusText);
  };
})();

vue

<template>
  <div class="random-cat">
    <img v-if="catUrl" :src="catUrl" alt="Random Cat Avatar" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const catUrl = ref('')

const getRandomCat = async () => {
  try {
    const res = await fetch('https://random-cat-assets-r2.hats-land.com/api/v1/json', {
      headers: { 'Accept': 'application/json' }
    })
    const data = await res.json()
    catUrl.value = data.url.webp // 可选 data.url.png
  } catch (err) {
    console.error('RandomCat fetch failed:', err)
  }
}

onMounted(getRandomCat)
</script>

jsx

import { useState, useEffect } from 'react'

function RandomCat() {
  const [catUrl, setCatUrl] = useState('')

  useEffect(() => {
    fetch('https://random-cat-assets-r2.hats-land.com/api/v1/json', {
      headers: { 'Accept': 'application/json' }
    })
      .then(r => r.json())
      .then(d => setCatUrl(d.url.webp)) // 可选 d.url.png
      .catch(e => console.error('RandomCat fetch failed:', e))
  }, [])

  return (
    <div className="random-cat">
      {catUrl && <img src={catUrl} alt="Random Cat Avatar" />}
    </div>
  )
}

export default RandomCat;

svelte

<script>
  import { onMount } from 'svelte'
  
  let catUrl = ''
  
  onMount(async () => {
    try {
      const res = await fetch('https://random-cat-assets-r2.hats-land.com/api/v1/json', {
        headers: { 'Accept': 'application/json' }
      })
      const data = await res.json()
      catUrl = data.url.webp // 可选 data.url.png
    } catch (err) {
      console.error('RandomCat fetch failed:', err)
    }
  })
</script>

<div class="random-cat">
  {#if catUrl}
    <img src={catUrl} alt="Random Cat Avatar" />
  {/if}
</div>