How to implement abortController

[martijnhalekor]

Today I noticed the performance in our application could be improved by cancelling requests when navigating away from the page. I tried to implement abortController like in the example below, but it doesn't seem to be cancelling requests when I navigate to a different page.

Am I doing something wrong? 😄 any help is greatly appreciated!

<script setup lang="ts">
const client = useSanctumClient();
const abortController = new AbortController();

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

const { data } = await useAsyncData(() =>
  client('/example-endpoint', {
    signal: abortController.signal
  })
);
</script>

[manchenkoff]

Hey @martijnhalekor, good question! Your example looks good to me, I also checked the sources of ofetch and it seems like they should support AbortController if you do not provide a timeout option at the same time.

My wild guess is to make sure that your onUnmounted hook is properly triggered by adding some logs 😄 also it can be a problem with different scopes and how Nuxt switched the context while navigating but I am not that familiar with it.

If nothing helps and you can't find a solution, let me know and I will convert it to the issue to find a solution.

[martijnhalekor]

Thanks, I did add a console log that got triggered, which led me seeking help here. I'll do one more round of investigating and then report here.

[martijnhalekor]

I am happy to share I got it working by switching to onBeforeRouteLeave. This does raise the question when or why we need onUnmounted hook? 🤔 I still use that hook in a few components to remove keyboard event listeners. Perhaps I should consider moving these to the beforeUnmount hook to make sure they are actually removed as it seems I shouldn't trust my current method.

const client = useSanctumClient();
const abortController = new AbortController();

onBeforeRouteLeave(() => abortController.abort());

const { data } = await useAsyncData(() =>
  client('/example-endpoint', {
    signal: abortController.signal
  })
);

[manchenkoff]

I guess the difference is that onUnmounted hook is coming from Vue itself, while onBeforeRouteLeave is from the Nuxt framework. Since the Nuxt is in charge of context switching, they may have some custom behaviour which led to triggering onUnmounted later.