Abort Fetch API Requests using AbortController

Learn how to use the AbortController in JavaScript to cancel API requests using fetch in React.
We'll walk through how to set up the AbortController with a fetch request and use it to cancel and abort stale requests to avoid updating the UI with old data in React.
🧰 Resources
Starter: github.com/colbyfayock/demo-s...
Code: github.com/colbyfayock/my-abo...
📺 UA-cam: ua-cam.com/users/colbyfayock?sub_c...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayock.com/newsletter/
🎥 What I Use: www.colbyfayock.com/uses
#colbyfayock #reactjs #api #webdevelopment

[@WrestlingTournamentsDotCom]

Finally! Someone demonstrated how to do it outside of a useEffect. This was so difficult to find, great tutorial. Thank you!

[@colbyfayock]

no problem!!

[@RefuelTheRocket]

Thank you colleague, you really helped me, i spend a day trying to understand, how it works, and with ur video i finally done it!

[@colbyfayock]

You're welcome. Glad it helped

[@user-dk3fz7tk2n]

Love your style in how you explain. Neat, clear. Subscribed.

[@colbyfayock]

thank you!!

[@colbyfayock]

Dig deeper into React with my course Full Stack React with Appwrite: spacejelly.dev/reactappwrite
Otherwise get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

[@bandekhoda7801]

Very useful!
Previously I didn't know how to implement an AbortController in a handler function because of the reasons you listed, so I always just defaulted to using useEffect with the cleanup function being controller.abort LOL

[@colbyfayock]

haha glad it helped!

[@user-sb3sy6pr5i]

very well explained you just earned a sub

[@colbyfayock]

thank you!

[@rigbyb]

Thanks, helped me understand it :)

[@colbyfayock]

no problem!

[@sincethatmoment]

Great demonstration Colby, as always. The example project is on spot in terms of illustrating the issue and the solution.
I have one question. As I understood, the AbortController cancels requests that are initiated but have not been completed yet. So, let's assume fetch returns responses pretty quickly in my connection. Does this mean that I have to type letters quickly for abortcontroller to cancel? And if I type slowly all the previous letters are going to get through. I know you mentioned throttling and stuff at the end, that's probably the solution. I was just wondering about AbortController

[@colbyfayock]

yeah - that's absolutely right. if there's no active request, we can't really cancel it. that's why i had to add the setTimeout inside of the API endpoint because it was too fast, though you could use the Network Tab throttling to potentially see this effect too when testing

[@Elator11777]

This looks nice, however, in a real production envirionment, you'd never have a search function inside of your component, what if it is imported from utils? How do you handle the abort requests in it? Can you pass refs to an imported function?

[@antoninogargiulo2308]

Great video! What if I have an error boundary (Next.js), and I don't want it to be triggered by cancelled request? Should I check the type of the error catched in the catch block?

[@colbyfayock]

did the cancelled request trigger the error boundary? i dont remember having that issue in my code wrapped in a try/catch: github.com/colbyfayock/my-abort-requests/blob/main/src/components/Search/Search.tsx
perhaps if you show me the code i can get a better idea to try to reproduce and see

[@irfansaeedkhan7242]

wow , thanks man, i was searching for something same but when user clicks multiple links to different pages, i want it to abort all others and just focus on the last one,
also if person is fetching multiple apis data it should about all and only fetch the last one in react/nextjs app, i am unable to do that or simply logic how to do it in whole application at globa,l level

[@colbyfayock]

glad it helped! for doing something globally you would need to be making all requests through some kind of single queue that's accessible globally

[@Shawn-Mosher]

Couldn’t you use debounce so it’s only fired once when the user stops typing?

[@colbyfayock]

totally! i mention that in there. or maybe i mentioned throttle as opposed to denounce, but generally, yeah. being able to combine the two would likely be the best bet between having a responsive enough UI and still managing the async requests getting fired out

[@JavascriptForEverything]

nice one

[@colbyfayock]

Thanks!

[@sankaranarayanankm7049]

which is better cleanup of useEffect or abort controller??

[@colbyfayock]

hey im not totally following your question - but i believe aborting in a useEffect cleanup function would be a good pattern to prevent the request from continuing

[@devT44]

The error we're getting here is same as CancelledError in axios?

[@colbyfayock]

unfamiliar with axios's handling

[@divinityinversace]

does the request get cancelled even if the component is unmounted?

[@colbyfayock]

thats a good question and im not 100% sure unless i would test it. i would expect given the initial code had executed with the controller that it would still be cancelled IF the code to cancel it was executed, however if it unmounts and it hadnt run yet, then i would expect it not. if you add the return function to useEffect, you can trigger the cancellation on unmount

[@divinityinversace]

@@colbyfayock thanks, i ended up setting up a cleanup function which takes care of the controller stuff

[@terryellis333]

Does this work for cancelling put reqeusts also, or just fetch? I'm having difficulty getitng it to cancel a PUT

[@colbyfayock]

seemed to work for me! d.pr/i/hDNmgf
i tested by simply updating my test API route to PUT: github.com/colbyfayock/my-abort-requests/blob/main/src/app/api/search/route.ts#L5
and the method on the fetch: github.com/colbyfayock/my-abort-requests/blob/main/src/components/Search/Search.tsx#L35

[@terryellis333]

@@colbyfayock Ok thanks; yea trying to figure out why this controller.abort isn't actually cancelling anything for me.

[@colbyfayock]

@@terryellis333is it possible the request is completing before it has a chance to cancel? on my local machine i had to add a timeout for testing purposes

[@terryellis333]

@@colbyfayock Well what's happening is, our web app is doing puts after every field of a form (no submit button :( ) and they're stacking up... and of course we have a race condition. I followed your example and set up an abort controller using a ref; then we're doing an await on a call that does an axios put to store the data and I'm passing in the abort controller to set the signal. I was expecting the first call to get cancelled, instead both complete with a 200 :(

[@colbyfayock]

@@terryellis333got it okay, im not familiar with how this works with Axios, potentially an issue there? but you might have some luck additionally adding throttling on the requests, to prevent the requests from occurring in the first place. that way you're avoiding sending too many requests, but if requests do trigger too quickly still due to differing factors, you have the abortcontroller to manage the cancellation

[@akylbekrysbekov]

but i think we can solve this problem with debounce

[@colbyfayock]

I think I mention this in the video but the right solution would be to have both for the use case

[@ken2ker495]

can you give me the api of pixar movie , please ? :>

[@colbyfayock]

hey unfortunately it's not a public API, its just an endpoint that i made that searches a static JSON file. you can find that code here and spin it up though!
github.com/colbyfayock/my-abort-requests/blob/main/src/app/api/search/route.ts