'Is it possible to cancel all running JS functions when destroying a Vue component?

I'm wondering if it's possible to cancel all running async functions belonging to a component when destroying that component. I have a View-component which fetches a lot of data when the user enters that page, the problem is if the user goes to another page before the data is fully loaded, then the request-queue-limit is reached and slows down the data-loading for the new page.

vue.js


Solution 1:[1]

What I did to fix this was to just check the lifecycle-status of the component instance. I found out that it was possible to check this._isBeingDestroyed and this._isDestroyed, and then do an early return.

async fetchDataFunction() {
if (this._isBeingDestroyed || this._isDestroyed) return;

// Code
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Markus Randa

Related Questions