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

const userId = ref(1)

watch(userId, (newId) => {
  const controller = new AbortController()

  fetch(`/api/users/${newId}`, { signal: controller.signal })
    .then(r => r.json())
    .then(data => { /* handle data */ })

  // If userId changes before fetch completes, abort the previous request
  onWatcherCleanup(() => {
    controller.abort()
  })
})
</script>

<!-- Also works inside watchEffect -->
<script setup>
import { ref, watchEffect, onWatcherCleanup } from 'vue'

const searchQuery = ref('')

watchEffect(() => {
  const controller = new AbortController()

  fetch(`/api/search?q=${searchQuery.value}`, {
    signal: controller.signal
  })
    .then(r => r.json())
    .then(data => { /* update results */ })

  onWatcherCleanup(() => controller.abort())
})
</script>