Canceling aurelia-fetch Requests

1

Hi, I have a fetch client that is getting data based on user input filters.
Occasionally previous requests ( with less filter criteria ) return later than the most current request. I would like to be able to cancel any pending requests, before sending of new ones.

Is this possible with the aurelia v2 fetch-client?

2

Something like this could work

const controller = new AbortController();

this.http.fetch(url, {
  method: 'GET',
  signal: controller.signal
}).catch(err => {
  console.log('aborted')
})

setTimeout( () => {
  controller.abort()
}, 100)
3

Yes, that works. In my case I need to save the abortController instance on my ViewModel and renew it before a new http get request otherwise the new request will already be canceled.

i solved it like this:

    getProjects() {
         // check it there is pending request
        if (this.http.activeRequestCount > 0) {
            // abort pending request
            this.abortController.abort();
        }

        return new Promise((resolve, reject) => {
            // create new abortController instance
            this.abortController = new AbortController();  
            this.http.fetch(`projects/${this.params.projectParamsToString()}`, {
                 method: "GET",
                 signal: this.abortController.signal
            }).then(response => {
                this.projects = (response as unknown as ProjectsResponse).results;
                resolve(true);
            }).catch(error => {
                // check error, if its just a canceled request ignore it
            })
        })
    }

Thanks for the tip! I see now that is the standard way to cancel vanilla fetch requests, and aurelia’s fetch client allows the same configuration.

1 Like