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

#colbyfayock #reactjs #api #webdevelopment

[JasonLayton]

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

[sohaildarwajkar]

First Video related to education that i ever watched in 1x speed..Your way of speaking, teaching and demonstrating is way too captivating.Bless u bro

[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!

[JonatanKruszewski]

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

[bandekhoda]

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

[jawyor-kt]

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

[jsde_coder]

really helped me out today. Thank you for this video!

[SyedNaqviwork]

very well explained you just earned a sub

[thevhejalltd]

why we are not using debounce, so that the request only get's when user type's the whole word

[tchatchabr]

Is it a good approach to create a custom hook for abortController and then use it in any component that we need it?

[Elator]

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?

[antoninogargiulo]

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?

[rg-sx]

Great explanation, however, on a lighter note, for simple use case like the input key debouncing is a better option.

[terryellis]

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

[sankaranarayanankm]

which is better cleanup of useEffect or abort controller??

[irfansaeedkhan]

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

[devT]

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

[Shawn-Mosher]

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

[akylbekrysbekov]

but i think we can solve this problem with debounce

[kenker]

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