# Canceling aurelia-fetch Requests

**URL:** https://discourse.aurelia.io/t/canceling-aurelia-fetch-requests/5376
**Category:** Uncategorized
**Created:** [March 11, 2024, 4:38pm UTC](https://discourse.aurelia.io/t/canceling-aurelia-fetch-requests/5376 "2024-03-11T16:38:22Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![aGustafson](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@aGustafson](https://discourse.aurelia.io/u/aGustafson)
#### Post date: [March 11, 2024, 4:38pm UTC](https://discourse.aurelia.io/t/canceling-aurelia-fetch-requests/5376/1 "2024-03-11T16:38:23Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)
#### Post date: [March 11, 2024, 9:59pm UTC](https://discourse.aurelia.io/t/canceling-aurelia-fetch-requests/5376/2 "2024-03-11T21:59:19Z")

</div>

Something like this could work

```auto
const controller = new AbortController();

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

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

```

---

<div class="post-metadata">

### Author: ![aGustafson](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@aGustafson](https://discourse.aurelia.io/u/aGustafson)
#### Post date: [March 12, 2024, 9:52am UTC](https://discourse.aurelia.io/t/canceling-aurelia-fetch-requests/5376/3 "2024-03-12T09:52:09Z")

</div>

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:

```auto
    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.