A Vue 3 hook to cancel promises when a component is unmounted

App.vue

<template>
  <button @click="ping">Ping</button>
</template>

<script setup>
import useUnmountSignal from './useUnmountSignal';

const unmountSignal = useUnmountSignal();

const ping = () => {
  fetch('https://ping.example.com', { signal: unmountSignal })
}
</script>

useUnmountSignal.js

import { onUnmounted } from 'vue';

export default function useUnmountSignal() {
    const abortController = new AbortController();

    onUnmounted(() => {
        abortController.abort();
    });

    return abortController.signal;
}